About the bug of better-scroll plug-in that cannot slide (solved by plug-in in 2021)

Better-scroll scrolling principle

As a parent container, the height of the wrapper will increase with the size of the content. Then, when
If the height of the content does not exceed the height of the parent container, it cannot be scrolled. Once it exceeds the height of the parent container, we can scroll the content area.
BetterScroll handles the scrolling of the first child element (content) of the container (wrapper) by default, and other elements will be ignored, so the following page structure is also given

<div class="wrapper">
 <ul class="content">
  <li>...</li>
  <li>...</li>
  ...
 </ul>
 <!-- You can put some other DOM here, but it will not affect the scrolling-->
</div>

So we will only talk about the most important point here! ! !

Because圖片需要加載, the initialization timing of better-scroll is very important, because when it is initialized, it will calculate the height and width of the parent element and the child element. If the image is not loaded yet and it is initialized, there will be a large deviation between the actual calculated height and your actual height (the network speed will also affect it...)

This is the biggest reason why all users are unable to scroll.

I encountered this problem a few days ago, and the better-scroll document was inaccessible. The document on github was only roughly usable. I spent a whole day looking for a solution. Various methods emerged on the Internet. The best solution:

Through plugin: better-scroll/observe-dom

BetterScroll dynamically calculates the scrollable height or width. You don't need to manually call the refresh() method when the height or width changes. The plugin does this for you via MutationObserver .

If your current browser does not support MutationObserver, it will be downgraded to use setTimeout.

use

Install dependencies npm install @better-scroll/observe-dom

import BScroll from '@better-scroll/core'
import ObserveDom from '@better-scroll/observe-dom'
BScroll.use(ObserveDom)

const bs = new BScroll('.wrapper', {
 observeDOM: true
})

There are many solutions to this problem, but many articles on the Internet do not explain it clearly. Just use this plug-in.

Another solution is to listen to the image loading and call refresh() to recalculate the height

Vue uses the img tag and uses @load="定義一個方法" to listen to the image loading event. As long as an image is loaded, the method you defined will be called once

Finally, write this.scroll.refresh() in the method to load an image, refresh it once and recalculate the height. At the same time, you need to use the anti-shake function to avoid various problems caused by frequent repeated calls.

This concludes this article about the better-scroll plug-in's inability to slide (solved in 2021 through plug-ins). For more related content about the better-scroll plug-in's inability to slide, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!