The purpose of this demo is to test out different options.
Change the options as you please.
Read the options documentation to use this demo properly!

For visibility purposes the scrollbar-track-elements have a reddish background-color.
This behavior is special and only for this demo.

Warning:

Result:

The purpose of this demo is to demonstrate all the capabilities of the plugin.

Below is a bunch of configuration options which will cause major changes to the DOM.
On the left side is the container with the plugin and on the right side is the native equivalent.

Except of the scrollbars, both containers should look exactly the same, if this is not the case please open a issue on github.
If you are using absolute padding, the containers should differ only in their padding.

Content:

Toggle "Absolute Container"

Toggle "Resize Container"

Toggle "100% Container"

Toggle "End Container"

Host:

Direction:

Box-Sizing:

Width:

Height:

Float:

Border:

Margin:

Padding:

Enviroment:

Width:

Height:

Reset

Update

Run

Use min- & max- width / height Absolute Padding Clip Always

Plugin:

Resize

100%

===== end =====

Native:

Resize

100%

===== end =====

Textarea Plugin:

Textarea Native:

The purpose of this demo is to show when certain callbacks are called.
Change the size of the content / host element and / or scroll to trigger some callbacks.
For further information to callbacks, such as arguments and more, please read the options documentation.

Watch the lights on the left side to see which callback was triggered.

Reset

Random Size

Change Direction

onScrollStart ( 0 )

onScroll ( 0 )

onScrollStop ( 0 )

onOverflowChanged ( 0 )

onOverflowAmountChanged ( 0 )

onDirectionChanged ( 0 )

onContentSizeChanged ( 0 )

onHostSizeChanged ( 0 )

onUpdated ( 0 )

resize me

The purpose of this demo is to show the extended textarea supported.
Furthermore, this demo shall show the functionality of the textarea "dynWidth" and "dynHeight" options.

Reset

Full Dynamic Width

Full Dynamic Height

Width:

Height:

Text Wrap:

Cols:

Rows:

Use DynWidth Option

Use DynHeight Option

The purpose of this demo is to show that nesting is supported.
You can also compare the native nesting behavior with the nesting behavior if the plugin is applied.
Both must be exactly the same.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.

But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Dagegen tadelt und hasst man mit Recht Den, welcher sich durch die Lockungen einer gegenwärtigen Lust erweichen und verführen lässt, ohne in seiner blinden Begierde zu sehen, welche Schmerzen und Unannehmlichkeiten seiner deshalb warten. Gleiche Schuld treffe Die, welche aus geistiger Schwäche, d.h. um der Arbeit und dem Schmerze zu entgehen, ihre Pflichten verabsäumen.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
Lust zurückweisen und Beschwerden nicht von sich weisen darf. Deshalb trifft der Weise dann eine Auswahl, damit er durch Zurückweisung einer Lust dafür eine grössere erlange oder durch Uebernahme gewisser Schmerzen sich grössere erspare.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

Man kann hier leicht und schnell den richtigen Unterschied treffen; zu einer ruhigen Zeit, wo die Wahl der Entscheidung völlig frei ist und nichts hindert, das zu thun, was den Meisten gefällt, hat man jede Lust zu erfassen und jeden Schmerz abzuhalten.

The purpose of this demo is to show how many possibilities you have to style your scrollbars or the whole container.
If you are searching theme templates, please switch to the themes section.

Violet: Fixed handle size, the track is visible. The scrollbars look like a slider.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Thin: The scrollbars are only visible if you hover over the host-element. (due to the option: scrollbars.autoHide : "leave")
Flexible handle size, the track is visible. The handles are very thin in appearance but the usability is still very good.

Minimal: The scrollbars are only visible during scrolling. (due to the option: scrollbars.autoHide : "scroll")
Flexible handle size, the track is invisible. The handles goes thicker if you hover over or drag them.

JavaScript modifications: The standard theme, but javascript makes changes to the appearance, dependent on the scroll offset.

The purpose of this demo is to show the power of the scroll method.

You can click on a element to scroll to it, select a option below or type your own scroll method call.

Relative coordinates

Absolute coordinates

Coordinates with units

Coordinates calculation

Easing

Special easing

DOM Element with its margin

DOM Element without its margin

DOM Element custom margin

DOM Element block begin

DOM Element block center

DOM Element block end

DOM Element block array

DOM Element y-axis only

DOM Element x-axis only

Reset

Direction: RTL

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

This demo shows that dynamic content can be handled.

Write and send a message to increase the content scroll size.

This demo shows how the plugin is handling a scaled host-element.
Change the scale value below and verify the plugins functionality.

Scale:

This demo shows how the plugins behavior with CSS scroll snapping.

Browser Support

This sample should work on Chrome 69+ (Canary, due to be released in September 2018), Firefox, Edge, IE 11, and Safari (iOS).

Chrome

Chrome version 69 has the most up-to-date CSS snap implementation. It uses scroll-snap-align, while other browsers still use scroll-snap-coordinate.

Safari/iOS

Safari supports CSS snapping with a couple of caveats (in addition to using the -webkit- prefix):

You must set -webkit-overflow-scrolling: touch;.

The elements being scrolled must have overflow: none; (the default setting).

Edge

On Edge, dragging the scrollbar thumb doesn't cause snapping. Touching or clicking the pagination area in the scroll bar does.

Edge requires the -ms- prefix for the CSS properties related to snap points.

IE 11

On IE11, snapping is supported for touch only.

IE11 requires the -ms- prefix for the CSS properties related to snap points.

Touch Support

CSS snapping works with touch on recent Android and iOS phones and tablets. It is a great option for implementing scroll-based interfaces on narrow screens.

As small demo which shows how the plugin is working inside a iFrame.
The plugin was applied from the current page (outside iFrame) and not from inside with a script tag for example.

Your iFrame source has to have the same origin (domain, protocol and port) as your current site, else you won't be able to do that due to the same origin policy.