# BetterScroll's "diagnosis"
# [Question 1] Why can't my BetterScroll work?
The problem basically lies in the Height Calculation Error. First of all, you must have a clear understanding of the scrolling principle of BetterScroll
. For vertical scrolling, simply the height of the wrapper
container is greater than the height of the content
content, and the translateY
is modified to achieve the purpose of scrolling. The principle of horizontal scrolling is similar. Then the calculation Scrollable Height is the logic necessary for BetterScroll
. The general logic is:
1. Pictures with uncertain sizes
Reason
When js performs a calculation of the scrollable height, the image has not been rendered.
Solution
Call
bs.refresh()
inside the callback function of the image'sonload
to ensure that the correct height of the image is calculated before calculating the Scrollable Height.
2. Vue's keep-alive component
Scenes
Suppose there are two components of A and B wrapped by
keep-alive
, A component uses BetterScroll, does some operation in A component, pops up input keyboard, then enters B component, then returns to A component,bs
is unable to scroll.Reason
Because Vue's keep-alive's cache and the input keyboard pops up, it compresses the height of the viewable area, causing the previously calculated scrollable height to be incorrect.
Solution
You can call
bs.refresh()
on Vue'sactivated
hook to recalculate the height or re-instantiate bs.
# [Question 2] Why do brower's vertical scrolling failed after I use BetterScroll to do horizontal scrolling?
BetterScroll provides a feature of slide
. If you implement a horizontal scrollin, such as slide
. do vertical scrolling in the slide
area, you can't bubble to the browser, so you can't manipulate the scroll bar of the native browser.
Reason
The internal scrolling calculations of BetterScroll exist in the user's interaction. For example, the mobile terminal is the
touchstart/touchmove/touchend
event. The listeners of these events generally have the linee.preventDefault()
, which will block the browser's default behavior so that the browser's scrollbar cannot be scrolled.Solution
Configure the
eventPassthrough
attribute.Let bs = new BScroll('.wrapper', { eventPassthrough: 'vertical' // keep vertical native scrolling })
# [Question 3] Why can't I pop up a pop-up window after using BetterScroll.
Reason
question 2 has been mentioned, it is caused by
e.preventDefault()
in touchstart.Solution
Option 1: Configure the
preventDefaultException
property.let bs = new BScroll('.wrapper', { preventDefaultException: { className: /(^|\s)test(\s|$)/ } })
eventDefaultException
can be used to control thee.preventDefault()
of thetouchstart
andtouchmove
events. If the above regular expression is used to check if the class name of the currently touched target element containstest
, if passed, Thene.preventDefault()
will not be called.Option 2: Configure the
preventDefault
property.let bs = new BScroll('.wrapper', { preventDefault: false })
preventDefault
is set tofalse
, there are some side effects, it is generally recommended to use Option one.WARNING
The side effect is that the touch event may bubble up to the document, causing the document to be dragged. At this point you need to listen for the parent or ancestor element of the
wrapper
element, bind them to the touchmove event, and calle.preventDefault()
.
# [Question 4] Why are the listeners for all click events inside BetterScroll content not triggered?
Reason
Still caused by
e.preventDefault()
. On the mobile side, if you calle.preventDefault()
inside the logic oftouchstart/touchmove/touchend
, it will prevent the execution of the click event of it and its child elements. Therefore, BetterScroll internally manages the dispatch of theclick
event, you only need theclick
configuration item.Solution
Configure the
click
attribute.Let bs = new BScroll('.wrapper', { click: true })
# [Question 5] Why is the click event dispatched twice when Nesting BetterScroll?
Reason
As stated in Question 4, the BetterScroll dispatches a
click
event internally, and nested scenes must have two or more bs.Solution
You can manage the bubbling of events by instantiating inner BetterScroll's
stopPropagation
configuration item, or by instantiating inner BetterScroll'sclick
configuration item to prevent multiple triggers of clicks.let innerBS = new BScroll('.wrapper', { stopPropagation: true }) // or let innerBS = new BScroll('.wrapper', { click: false })
# [Question 6] Why do I listen to the scroll event of bs, why not execute the callback?
Reason
BetterScroll does not dispatch the
scroll
event at any time because there is a performance penalty for getting the scroll position of bs. As for whether or not to distribute, it depends on theprobeType
configuration item.Solution
Let bs = new BScroll('.div', { probeType: 3 // real-time dispatch })
# [Question 7] In two vertically nested bs scenes, why move the inner bs will cause the outer layer to also be scrolled.
Reason
The internal logic of BetterScroll is in the body of the listener function of the touch event. Since the touch event of the internal bs is triggered, it will naturally bubble to the outer bs.
Solution
Since you know the reason, there are corresponding solutions. For example, when you scroll the inner
bs
, listen for thescroll
event and call the outerbs.disable()
to disable the outerbs
. When the innerbs
scrolls to the bottom, it means that you need to scroll the outerbs
at this time. At this time, call the outerbs.enable()
to activate the outer layer and call the innerbs.disable().
to forbid inner scrolling. In fact, think about it, this interaction is consistent with the nested scrolling behavior of theWeb browser
, except that the browser handles the various scrolling nesting logic for you, and the BetterScroll requires your own dispatched events and exposed APIs to fulfill.The scroll (opens new window) component of
cube-ui
gives a solution to this scenario. Code is here (opens new window)
# [Question 8] In the vertical bs nesting horizontal bs scene, why does the vertical movement of the horizontal bs area do not cause vertical scrolling of the outer vertical bs?
Reason
The reason is similar to Question 2, because
e.preventDefault()
affects the default scrolling behavior, causing the outer bs to not trigger the touch event.Solution
The solution is to configure the
eventPassthrough
property of the inner bs to keep the default native vertical scrolling.Let innerBS = new BScroll('.wrapper', { eventPassthrough: 'vertical' // keep vertical native scrolling })
← FAQ