(cache)ScrollBooster

Example 1: With Transform

Basic content scroll in horizontal dimension with transform property.

let viewport = document.querySelector('.ex1 .tbl-main')
let content = viewport.querySelector('table')

let sb = new ScrollBooster({
  viewport, // this parameter is required
  content, // scrollable element
  mode: 'x', // scroll only in horizontal dimension
  onUpdate: (data)=> {
    // your scroll logic goes here
    content.style.transform = `translateX(${-data.position.x}px)`
  }
})

#
1
2
3
4
5
6
7
8

boost	scroll	bounce	UI	dude	dude	first	dude	dude	boost	drag	UI	boost	boost	scroll
first UI	bounce wow	drag bounce	wow drag	UI boost	boost boost	dude drag	bounce drag	wow bounce	scroll wow	bounce boost	UI wow	bounce UI	dude scroll	UI dude
drag UI	boost boost	wow scroll	boost UI	wow bounce	dude drag	dude dude	drag dude	first bounce	UI dude	bounce dude	scroll first	scroll boost	scroll scroll	dude scroll
boost drag	dude UI	drag dude	bounce boost	bounce scroll	dude dude	first boost	scroll UI	scroll bounce	first UI	UI drag	UI UI	first first	bounce bounce	drag drag
bounce scroll	first wow	first drag	UI drag	wow scroll	boost bounce	wow UI	drag boost	drag bounce	scroll bounce	bounce bounce	dude bounce	bounce UI	bounce scroll	drag boost
bounce bounce	first drag	scroll UI	bounce dude	bounce UI	UI dude	dude first	wow scroll	drag UI	first UI	dude wow	bounce first	dude scroll	scroll boost	bounce first
boost drag	bounce boost	bounce dude	scroll boost	UI dude	UI drag	drag dude	UI dude	scroll boost	scroll UI	drag dude	bounce drag	drag drag	bounce boost	bounce scroll
dude UI	boost scroll	first first	scroll first	wow drag	drag bounce	drag boost	boost UI	drag bounce	dude scroll	scroll scroll	bounce boost	dude scroll	UI UI	drag dude
UI boost	wow wow	dude drag	dude bounce	scroll bounce	dude scroll	bounce drag	scroll bounce	UI boost	UI scroll	UI drag	drag scroll	dude bounce	dude bounce	boost boost

Example 2: With Default Scrollbar

Content scroll in horizontal dimension with scrollLeft property.

let viewport = document.querySelector('.ex2 .tbl-main')
let content = viewport.querySelector('table')

let sb = new ScrollBooster({
  viewport,
  content,
  mode: 'x',
  onUpdate: (data)=> {
    viewport.scrollLeft = data.position.x
  }
})

#
1
2
3
4
5
6
7
8

boost	scroll	bounce	UI	dude	dude	first	dude	dude	boost	drag	UI	boost	boost	scroll
first UI	bounce wow	drag bounce	wow drag	UI boost	boost boost	dude drag	bounce drag	wow bounce	scroll wow	bounce boost	UI wow	bounce UI	dude scroll	UI dude
drag UI	boost boost	wow scroll	boost UI	wow bounce	dude drag	dude dude	drag dude	first bounce	UI dude	bounce dude	scroll first	scroll boost	scroll scroll	dude scroll
boost drag	dude UI	drag dude	bounce boost	bounce scroll	dude dude	first boost	scroll UI	scroll bounce	first UI	UI drag	UI UI	first first	bounce bounce	drag drag
bounce scroll	first wow	first drag	UI drag	wow scroll	boost bounce	wow UI	drag boost	drag bounce	scroll bounce	bounce bounce	dude bounce	bounce UI	bounce scroll	drag boost
bounce bounce	first drag	scroll UI	bounce dude	bounce UI	UI dude	dude first	wow scroll	drag UI	first UI	dude wow	bounce first	dude scroll	scroll boost	bounce first
boost drag	bounce boost	bounce dude	scroll boost	UI dude	UI drag	drag dude	UI dude	scroll boost	scroll UI	drag dude	bounce drag	drag drag	bounce boost	bounce scroll
dude UI	boost scroll	first first	scroll first	wow drag	drag bounce	drag boost	boost UI	drag bounce	dude scroll	scroll scroll	bounce boost	dude scroll	UI UI	drag dude
UI boost	wow wow	dude drag	dude bounce	scroll bounce	dude scroll	bounce drag	scroll bounce	UI boost	UI scroll	UI drag	drag scroll	dude bounce	dude bounce	boost boost

Example 3: Vertical And Horizontal Scroll

Both horizontal and vertical scroll are supported. There is also a mode that emulates scroll via mouse wheel.

let viewport = document.querySelector('.ex3 .img-wrapper')
let content = viewport.querySelector('.img-main')
let img = content.querySelector('img')

let sb = new ScrollBooster({
  viewport,
  content,
  emulateScroll: true,
  onUpdate: (data)=> {
    content.style.transform = `translate(
      ${-data.position.x}px,
      ${-data.position.y}px
    )`
  }
})

img.addEventListener('load', () => {
  // update sizes/metrics after image load
  sb.updateMetrics()

  // set viewport position to the center of an image
  let offsetX = img.scrollWidth - viewport.offsetWidth
  let offsetY = img.scrollHeight - viewport.offsetHeight
  sb.setPosition({
    x: offsetX / 2,
    y: offsetY / 2
  })
})

ScrollBooster

Enjoyable content drag-to-scroll library

Example 1: With Transform

Example 2: With Default Scrollbar

Example 3: Vertical And Horizontal Scroll