| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[75],{779:function(e,t,s){"use strict";s.r(t);var a=s(41),n=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"betterscroll-s-diagnosis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#betterscroll-s-diagnosis"}},[e._v("#")]),e._v(' BetterScroll\'s "diagnosis"')]),e._v(" "),t("h3",{attrs:{id:"question-1-why-can-t-my-betterscroll-work"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-1-why-can-t-my-betterscroll-work"}},[e._v("#")]),e._v(" [Question 1] Why can't my BetterScroll work?")]),e._v(" "),t("p",[e._v("The problem basically lies in the "),t("strong",[e._v("Height Calculation Error")]),e._v(". First of all, you must have a clear understanding of the scrolling principle of "),t("code",[e._v("BetterScroll")]),e._v(". For vertical scrolling, simply the height of the "),t("code",[e._v("wrapper")]),e._v(" container is greater than the height of the "),t("code",[e._v("content")]),e._v(" content, and the "),t("code",[e._v("translateY")]),e._v(" is modified to achieve the purpose of scrolling. The principle of horizontal scrolling is similar. Then the calculation "),t("strong",[e._v("Scrollable Height")]),e._v(" is the logic necessary for "),t("code",[e._v("BetterScroll")]),e._v(". The general logic is:")]),e._v(" "),t("p",[e._v("1. "),t("strong",[e._v("Pictures with uncertain sizes")])]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("When js performs a calculation of the scrollable height, the image has not been rendered.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("Call "),t("code",[e._v("bs.refresh()")]),e._v(" inside the callback function of the image's "),t("code",[e._v("onload")]),e._v(" to ensure that the correct height of the image is calculated before calculating the "),t("strong",[e._v("Scrollable Height")]),e._v(".")])])]),e._v(" "),t("p",[e._v("2. "),t("strong",[e._v("Vue's keep-alive component")])]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Scenes")])]),e._v(" "),t("p",[e._v("Suppose there are two components of A and B wrapped by "),t("code",[e._v("keep-alive")]),e._v(", A component uses BetterScroll, does some operation in A component, pops up input keyboard, then enters B component, then returns to A component, "),t("code",[e._v("bs")]),e._v(" is unable to scroll.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("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.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("You can call "),t("code",[e._v("bs.refresh()")]),e._v(" on Vue's "),t("code",[e._v("activated")]),e._v(" hook to recalculate the height or re-instantiate bs.")])])]),e._v(" "),t("h3",{attrs:{id:"question-2-why-do-brower-s-vertical-scrolling-failed-after-i-use-betterscroll-to-do-horizontal-scrolling"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-2-why-do-brower-s-vertical-scrolling-failed-after-i-use-betterscroll-to-do-horizontal-scrolling"}},[e._v("#")]),e._v(" [Question 2] Why do brower's vertical scrolling failed after I use BetterScroll to do horizontal scrolling?")]),e._v(" "),t("p",[e._v("BetterScroll provides a feature of "),t("code",[e._v("slide")]),e._v(". If you implement a horizontal scrollin, such as "),t("code",[e._v("slide")]),e._v(". do vertical scrolling in the "),t("code",[e._v("slide")]),e._v(" area, you can't bubble to the browser, so you can't manipulate the scroll bar of the native browser.")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("The internal scrolling calculations of BetterScroll exist in the user's interaction. For example, the mobile terminal is the "),t("code",[e._v("touchstart/touchmove/touchend")]),e._v(" event. The listeners of these events generally have the line "),t("code",[e._v("e.preventDefault()")]),e._v(", which will block the browser's default behavior so that the browser's scrollbar cannot be scrolled.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("Configure the "),t("code",[e._v("eventPassthrough")]),e._v(" attribute.")]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[e._v(" Let bs "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n eventPassthrough"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'vertical'")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// keep vertical native scrolling")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])])])]),e._v(" "),t("h3",{attrs:{id:"question-3-why-can-t-i-pop-up-a-pop-up-window-after-using-betterscroll"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-3-why-can-t-i-pop-up-a-pop-up-window-after-using-betterscroll"}},[e._v("#")]),e._v(" [Question 3] Why can't I pop up a pop-up window after using BetterScroll.")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[t("strong",[e._v("question 2")]),e._v(" has been mentioned, it is caused by "),t("code",[e._v("e.preventDefault()")]),e._v(" in touchstart.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("Option 1: Configure the "),t("code",[e._v("preventDefaultException")]),e._v(" property.")]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("let")]),e._v(" bs "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[e._v("preventDefaultException")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[e._v("className")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token regex"}},[t("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[e._v("/")]),t("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[e._v("(^|\\s)test(\\s|$)")]),t("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[e._v("/")])]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])]),t("p",[t("code",[e._v("eventDefaultException")]),e._v(" can be used to control the "),t("code",[e._v("e.preventDefault()")]),e._v(" of the "),t("code",[e._v("touchstart")]),e._v(" and "),t("code",[e._v("touchmove")]),e._v(" events. If the above regular expression is used to check if the class name of the currently touched target element contains "),t("code",[e._v("test")]),e._v(", if passed, Then "),t("code",[e._v("e.preventDefault()")]),e._v(" will not be called.")]),e._v(" "),t("p",[e._v("Option 2: Configure the "),t("code",[e._v("preventDefault")]),e._v(" property.")]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("let")]),e._v(" bs "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[e._v("preventDefault")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[e._v("false")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])]),t("p",[t("code",[e._v("preventDefault")]),e._v(" is set to "),t("code",[e._v("false")]),e._v(", there are some side effects, it is generally recommended to use "),t("strong",[e._v("Option one")]),e._v(".")]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),t("p",[e._v("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 "),t("code",[e._v("wrapper")]),e._v(" element, bind them to the touchmove event, and call "),t("code",[e._v("e.preventDefault()")]),e._v(".")])])])]),e._v(" "),t("h3",{attrs:{id:"question-4-why-are-the-listeners-for-all-click-events-inside-betterscroll-content-not-triggered"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-4-why-are-the-listeners-for-all-click-events-inside-betterscroll-content-not-triggered"}},[e._v("#")]),e._v(" [Question 4] Why are the listeners for all click events inside BetterScroll content not triggered?")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("Still caused by "),t("code",[e._v("e.preventDefault()")]),e._v(". On the mobile side, if you call "),t("code",[e._v("e.preventDefault()")]),e._v(" inside the logic of "),t("code",[e._v("touchstart/touchmove/touchend")]),e._v(", it will prevent the execution of the click event of it and its child elements. Therefore, BetterScroll internally manages the dispatch of the "),t("code",[e._v("click")]),e._v(" event, you only need the "),t("code",[e._v("click")]),e._v(" configuration item.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("Configure the "),t("code",[e._v("click")]),e._v(" attribute.")]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[e._v(" Let bs "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[e._v("click")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[e._v("true")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])])])]),e._v(" "),t("h3",{attrs:{id:"question-5-why-is-the-click-event-dispatched-twice-when-nesting-betterscroll"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-5-why-is-the-click-event-dispatched-twice-when-nesting-betterscroll"}},[e._v("#")]),e._v(" [Question 5] Why is the click event dispatched twice when Nesting BetterScroll?")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("As stated in "),t("strong",[e._v("Question 4")]),e._v(", the BetterScroll dispatches a "),t("code",[e._v("click")]),e._v(" event internally, and nested scenes must have two or more bs.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("You can manage the bubbling of events by instantiating inner BetterScroll's "),t("code",[e._v("stopPropagation")]),e._v(" configuration item, or by instantiating inner BetterScroll's "),t("code",[e._v("click")]),e._v(" configuration item to prevent multiple triggers of clicks.")]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("let")]),e._v(" innerBS "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[e._v("stopPropagation")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[e._v("true")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// or")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("let")]),e._v(" innerBS "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[e._v("click")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[e._v("false")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])])])]),e._v(" "),t("h3",{attrs:{id:"question-6-why-do-i-listen-to-the-scroll-event-of-bs-why-not-execute-the-callback"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-6-why-do-i-listen-to-the-scroll-event-of-bs-why-not-execute-the-callback"}},[e._v("#")]),e._v(" [Question 6] Why do I listen to the scroll event of bs, why not execute the callback?")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("BetterScroll does not dispatch the "),t("code",[e._v("scroll")]),e._v(" 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 the "),t("code",[e._v("probeType")]),e._v(" configuration item.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[e._v(" Let bs "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.div'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n probeType"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[e._v("3")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// real-time dispatch")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])])])]),e._v(" "),t("h3",{attrs:{id:"question-7-in-two-vertically-nested-bs-scenes-why-move-the-inner-bs-will-cause-the-outer-layer-to-also-be-scrolled"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#question-7-in-two-vertically-nested-bs-scenes-why-move-the-inner-bs-will-cause-the-outer-layer-to-also-be-scrolled"}},[e._v("#")]),e._v(" [Question 7] In two vertically nested bs scenes, why move the inner bs will cause the outer layer to also be scrolled.")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("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.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("Since you know the reason, there are corresponding solutions. For example, when you scroll the "),t("strong",[e._v("inner")]),e._v(" "),t("code",[e._v("bs")]),e._v(", listen for the "),t("code",[e._v("scroll")]),e._v(" event and call the "),t("strong",[e._v("outer")]),e._v(" "),t("code",[e._v("bs.disable()")]),e._v(" to disable the "),t("strong",[e._v("outer")]),e._v(" "),t("code",[e._v("bs")]),e._v(". When the "),t("strong",[e._v("inner")]),e._v(" "),t("code",[e._v("bs")]),e._v(" scrolls to the bottom, it means that you need to scroll the "),t("strong",[e._v("outer")]),e._v(" "),t("code",[e._v("bs")]),e._v(" at this time. At this time, call the "),t("strong",[e._v("outer")]),e._v(" "),t("code",[e._v("bs.enable()")]),e._v(" to activate the outer layer and call the "),t("strong",[e._v("inner")]),e._v(" "),t("code",[e._v("bs.disable().")]),e._v(" to forbid inner scrolling. In fact, think about it, this interaction is consistent with the nested scrolling behavior of the "),t("code",[e._v("Web browser")]),e._v(", 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.")]),e._v(" "),t("blockquote",[t("p",[e._v("The "),t("a",{attrs:{href:"https://didi.github.io/cube-ui/example/#/scroll/v-scrolls",target:"_blank",rel:"noopener noreferrer"}},[e._v("scroll"),t("OutboundLink")],1),e._v(" component of "),t("code",[e._v("cube-ui")]),e._v(" gives a solution to this scenario. "),t("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/dev/src/components/scroll/scroll.vue",target:"_blank",rel:"noopener noreferrer"}},[e._v("Code is here"),t("OutboundLink")],1)])])])]),e._v(" "),t("h3",{attrs:{id:"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"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#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"}},[e._v("#")]),e._v(" [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?")]),e._v(" "),t("ul",[t("li",[t("p",[t("strong",[e._v("Reason")])]),e._v(" "),t("p",[e._v("The reason is similar to "),t("strong",[e._v("Question 2")]),e._v(", because "),t("code",[e._v("e.preventDefault()")]),e._v(" affects the default scrolling behavior, causing the outer bs to not trigger the touch event.")])]),e._v(" "),t("li",[t("p",[t("strong",[e._v("Solution")])]),e._v(" "),t("p",[e._v("The solution is to configure the "),t("code",[e._v("eventPassthrough")]),e._v(" property of the inner bs to keep the default native vertical scrolling.")]),e._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[e._v(" Let innerBS "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BScroll")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.wrapper'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n eventPassthrough"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[e._v("'vertical'")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// keep vertical native scrolling")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])])])])])}),[],!1,null,null,null);t.default=n.exports}}]);
|
