# base-scroll

In the design of BetterScroll 2.0, we abstracted the core scrolling part, which is the smallest unit of use of BetterScroll. The compression volume is nearly one-third smaller than 1.0. You may only need to complete a pure scrolling, then just import this library as follows:

  npm install @better-scroll/core --save
  import BScroll from '@better-scroll/core'
  const bs = new BScroll('.div')

# Get started

BetterScroll has a variety of scroll modes.

  • vertical scroll


    BetterScroll dispatches the scroll event in real time, which requires setting probeType to 3.

  • Horizontal scroll


    BetterScroll achieves horizontal scrolling, which is more demanding for CSS. First you need to make sure that the wrapper doesn't wrap, and the display of content is inline-block.

      // ...
      white-space nowrap
      // ...
      display inline-block
  • freeScroll(Horizontal and vertical scroll simultaneously)

# Dynamic Content 2.0.4

For the 2.0.4 version, it has the ability to detect content becoming other elements, you can check the following example.

# specifiedIndexAsContent 2.0.4

For the 2.0.4 version, you can specify a child of wrapper as content. In previous versions, BetterScroll would only process the first child element of the wrapper. For details.

# quadrant 2.3.0

For the 2.3.0 version, If the parent element or ancestor element of BetterScroll wrapper DOM rotates, you can use the quadrant option to modify the user's interactive behavior.

  • Vertical becomes Horizontal
  • Horizontal scroll flipped

# Warm Tips


If there is any situation where scrolling is not possible, you should first check if the height/width of the content element is greater than the height/width of the wrapper. This is a prerequisite for content to scroll.

If the content has an image, it may happen that the image has not been downloaded when the DOM element is rendered, so the height of the content element is less than expected, and the scrolling is not normal. At this point you should call the bs.refresh method after the image has been loaded, such as the onload event callback, which will recalculate the latest scrolling size.