1. Basic use

1.1 installation and use of NPM

  • Better Scroll is hosted on Npm, run the following command to install:
npm install better-scroll --save
Copy the code
  • Basic HTML structure
<div class="wrapper">
  <ul class="content"> <li>... </li> <li>... </li> ... </ul> </div>Copy the code
  • Import and initialize
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
Copy the code

2. Option configuration

2.1. Set the option in the second parameter when instantiating better-Scroll

  • let scroll = new BScroll(DOM,options)
    • Parameter 1: DOM element (you can also write.class directly)
    • Parameter 2: Basic options configuration object (Options object type)

2.2 Basic Configuration (For details, see the official website)

3, pit

3.1. Scrollable area

  • The better scroll determines the scrollable area based on the scrollerHeight property
    • ScrollerHeight is determined by the height of the Content subcomponent in the Better Scroll
    • When each sub-component contains pictures, if the loading of pictures is delayed, the height of the unloaded picture cannot be calculated, and the height of the scrollerHeight will not be updated automatically after all the pictures are loaded, so the sliding region height is not correct
  • Refresh () {refresh() {refresh() {refresh()}}
  • Monitoring method
    • Img. onload=function(){}
    • Vue listening: @load=’ method ‘
  • Call refresh of better-Scroll ()

3.2 position: Fixed invalid

  • The position: fixed element will still be offset along with the transform
    • The bscroll is offset by transform translate, but the parent element is set to transform, and all child elements’ position: fixed is no longer relative to the viewport, but to the parent element of the transform. So the element set position: fixed will still be offset along with the transform
  • To solve
    • Set position: fixed to place the element outside the Better-Scroll
    • If you want to slide the Better Scroll to a certain position and you want to hold something in the better Scroll then you can define a component outside the better Scroll that’s the same component that’s not hidden at the specified position, hidden when it’s at the specified position, And the one in the Better Scroll is just going to leave it alone and just keep going up

(Official document)