Home Explore Help
Register Sign In
wicresoft
/
doc_project
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 9cd9c7d1d5
Branches Tags
doc_project
/
better-scroll-docs
/
assets
/
js
/
99.c75096e0.js

99.c75096e0.js 23 KB
History Raw

1 
  1. (window.webpackJsonp=window.webpackJsonp||[]).push([[99],{805:function(t,s,e){"use strict";e.r(s);var a=e(41),r=Object(a.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"betterscroll-的-疑难杂症"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#betterscroll-的-疑难杂症"}},[t._v("#")]),t._v(" BetterScroll 的“疑难杂症”")]),t._v(" "),s("h3",{attrs:{id:"【问题一】为什么我的-betterscroll-滑动不了"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题一】为什么我的-betterscroll-滑动不了"}},[t._v("#")]),t._v(" 【问题一】为什么我的 BetterScroll 滑动不了？")]),t._v(" "),s("p",[t._v("问题基本上出在于"),s("strong",[t._v("高度的计算错误")]),t._v("。首先，你必须对 "),s("code",[t._v("BetterScroll")]),t._v(" 的滚动原理有一个清晰的认识，对于竖向滚动，简单的来说就是 "),s("code",[t._v("wrapper")]),t._v(" 容器的高度大于 "),s("code",[t._v("content")]),t._v(" 内容的高度，修改 "),s("code",[t._v("translateY")]),t._v(" 来达到滚动的目的，横向滚动的原理类似。那么计算"),s("strong",[t._v("可滚动的高度")]),t._v("就是 BetterScroll 必备的逻辑。一般这个逻辑出错的场景在于：")]),t._v(" "),s("ol",[s("li",[s("p",[s("strong",[t._v("存在不确定尺寸的图片")])]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("bs 执行计算"),s("strong",[t._v("可滚动高度")]),t._v("的时候，图片还未渲染完成，也无法监听到图片的加载。有时候甚至配置 "),s("code",[t._v("observeDOM")]),t._v(" 为 "),s("code",[t._v("true")]),t._v(" 也没效果。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("在图片的 onload 的回调函数里面调用 "),s("code",[t._v("bs.refresh()")]),t._v(" 来确保得到正确的图片高度之后再计算"),s("strong",[t._v("可滚动的高度")]),t._v("。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[s("code",[t._v("observeDOM")]),t._v(" 为 "),s("code",[t._v("true")]),t._v(" 的时候，BetterScroll 首先通过 "),s("a",{attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver",target:"_blank",rel:"noopener noreferrer"}},[t._v("MutationObserver"),s("OutboundLink")],1),t._v(" 来监视对 DOM Tree 的改变，但是"),s("strong",[t._v("无法监听图片是否加载完成")]),t._v("，所以需要手动调用 "),s("code",[t._v("refresh()")]),t._v(" 来计算高度。")]),t._v(" "),s("p",[t._v("如果当前浏览器不支持 MutationObserver，会降级用 "),s("code",[t._v("setTimeout")]),t._v(" 每隔 1s 来重复计算可滚动的高度，这样又能保证在图片加载完成之后，可滚动的高度计算正确。")])])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("Vue 的 keep-alive 组件")])]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("场景")])]),t._v(" "),s("p",[t._v("假设存在 A、B 两个被 "),s("code",[t._v("keep-alive")]),t._v(" 包裹的组件，A 组件使用了 BetterScroll，在 A 组件做了某种操作，弹出输入键盘，之后进入到 B 组件，再返回 A 组件的时候，bs 无法滚动。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("由于 Vue 的 keep-alive 的缓存加上输入键盘弹起时候，会压缩可视区域的高度，导致之前计算过的可滚动的高度有误。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("可以在 Vue 的 "),s("code",[t._v("activated")]),t._v(" 的钩子里面调用 "),s("code",[t._v("bs.refresh()")]),t._v(" 重新计算高度或者重新实例化 bs。")])])])])]),t._v(" "),s("h3",{attrs:{id:"【问题二】为什么我用-betterscroll-做了横向滚动之后-纵向滚动失效"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题二】为什么我用-betterscroll-做了横向滚动之后-纵向滚动失效"}},[t._v("#")]),t._v(" 【问题二】为什么我用 BetterScroll 做了横向滚动之后，纵向滚动失效？")]),t._v(" "),s("p",[t._v("BetterScroll 提供了 "),s("code",[t._v("slide")]),t._v(" 的 feature。如果实现了一个横向滚动的 "),s("code",[t._v("slide")]),t._v("，在 "),s("code",[t._v("slide")]),t._v(" 区域做竖向滚动的操作，无法冒泡到浏览器，这样就无法操纵原生浏览器的滚动条了。")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("BetterScroll 内部的滚动计算存在于用户的交互，比如移动端就是 "),s("code",[t._v("touchstart/touchmove/touchend")]),t._v(" 事件，这些事件的侦听器一般都有 "),s("code",[t._v("e.preventDefault()")]),t._v(" 这一行代码，会阻止浏览器的默认行为，这样浏览器的滚动条无法被滚动。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("配置 "),s("code",[t._v("eventPassthrough")]),t._v(" 属性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("eventPassthrough")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vertical'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 保持纵向的原生浏览器滚动")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])]),t._v(" "),s("h3",{attrs:{id:"【问题三】为什么我用-betterscroll-之后-无法在浏览器弹出长按图片保存等弹窗。"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题三】为什么我用-betterscroll-之后-无法在浏览器弹出长按图片保存等弹窗。"}},[t._v("#")]),t._v(" 【问题三】为什么我用 BetterScroll 之后，无法在浏览器弹出长按图片保存等弹窗。")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("在"),s("strong",[t._v("问题二")]),t._v("已经提到了，"),s("code",[t._v("touchstart")]),t._v(" 事件里面的"),s("code",[t._v("e.preventDefault()")]),t._v(" 造成的。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("方案一：配置 "),s("code",[t._v("preventDefaultException")]),t._v(" 属性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preventDefaultException")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("className")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("(^|\\s)test(\\s|$)")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("通过 "),s("code",[t._v("preventDefaultException")]),t._v(" 可以控制 "),s("code",[t._v("touchstart")]),t._v(" 和 "),s("code",[t._v("touchmove")]),t._v(" 事件的 "),s("code",[t._v("e.preventDefault()")]),t._v("。上述的正则是用来校验当前触摸的目标元素 class 名称是否含有 "),s("code",[t._v("test")]),t._v("，如果通过了，则不会调用 "),s("code",[t._v("e.preventDefault()")]),t._v("。")]),t._v(" "),s("p",[t._v("方案二：配置 "),s("code",[t._v("preventDefault")]),t._v(" 属性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preventDefault")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("preventDefault 设置为 false，会有一些副作用，一般推荐使用"),s("strong",[t._v("方案一")]),t._v("。")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("副作用在于：touch 事件可能会冒泡到 document，导致文档也被拖拽。这个时候你需要监听 "),s("code",[t._v("wrapper")]),t._v(" 元素的父元素或者祖先元素，给他们绑定 touchmove 事件，并且调用 "),s("code",[t._v("e.preventDefault()")]),t._v("。最常见的应该是"),s("a",{attrs:{href:"https://www.cnblogs.com/jasonwang2y60/p/6848464.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("禁止微信下拉浏览器查看域名"),s("OutboundLink")],1)])])])]),t._v(" "),s("h3",{attrs:{id:"【问题四】为什么-betterscroll-content-内部的所有的-click-事件的侦听器都不触发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题四】为什么-betterscroll-content-内部的所有的-click-事件的侦听器都不触发"}},[t._v("#")]),t._v(" 【问题四】为什么 BetterScroll content 内部的所有的 click 事件的侦听器都不触发？")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("依然是 "),s("code",[t._v("touch")]),t._v(" 事件的 "),s("code",[t._v("e.preventDefault()")]),t._v(" 的原因。在移动端，如果你在 "),s("code",[t._v("touchstart/touchmove/touchend")]),t._v(" 的逻辑里面调用 "),s("code",[t._v("e.preventDefault()")]),t._v("，会阻止它以及它子元素的 click 事件的执行。因此，BetterScroll 内部会管理 "),s("code",[t._v("click")]),t._v(" 事件的派发，你只需要 "),s("code",[t._v("click")]),t._v(" 配置项即可。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("配置 "),s("code",[t._v("click")]),t._v(" 属性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("click")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])]),t._v(" "),s("h3",{attrs:{id:"【问题五】为什么在嵌套-betterscroll-的时候-click-事件派发两次"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题五】为什么在嵌套-betterscroll-的时候-click-事件派发两次"}},[t._v("#")]),t._v(" 【问题五】为什么在嵌套 BetterScroll 的时候，click 事件派发两次？")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("正如"),s("strong",[t._v("问题四")]),t._v("所说，BetterScroll 内部会派发 "),s("code",[t._v("click")]),t._v(" 事件，并且嵌套场景肯定是存在两个或两个以上的 bs。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("你可以通过实例化内层 BetterScroll 的 "),s("code",[t._v("stopPropagation")]),t._v(" 配置项来管理事件的冒泡，或者通过配置内层 BetterScroll 的 "),s("code",[t._v("click")]),t._v(" 配置项来防止 click 的多次触发。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" innerBS "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("stopPropagation")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" innerBS "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("click")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])]),t._v(" "),s("h3",{attrs:{id:"【问题六】为什么我监听了-bs-的-scroll-事件-为啥回调不执行"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题六】为什么我监听了-bs-的-scroll-事件-为啥回调不执行"}},[t._v("#")]),t._v(" 【问题六】为什么我监听了 bs 的 scroll 事件，为啥回调不执行？")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("BetterScroll 并不是在任何时刻都会派发 "),s("code",[t._v("scroll")]),t._v(" 事件，因为获取 bs 的滚动位置是有一定的性能损耗。至于是否派发，是取决于 "),s("code",[t._v("probeType")]),t._v(" 配置项。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.div'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("probeType")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实时派发")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])]),t._v(" "),s("h3",{attrs:{id:"【问题七】在两个纵向嵌套的-bs-场景-为什么移动内层的-bs-会导致外层也被滚动。"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题七】在两个纵向嵌套的-bs-场景-为什么移动内层的-bs-会导致外层也被滚动。"}},[t._v("#")]),t._v(" 【问题七】在两个纵向嵌套的 bs 场景，为什么移动内层的 bs，会导致外层也被滚动。")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("BetterScroll 的内部逻辑都在 touch 事件的侦听器函数体内，既然内部的 bs 的 touch 事件被触发，自然会冒泡到外层的 bs。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("既然知道原因，那么也有相对应的解决办法。比如在你滚动内层的 bs 时候，监听 scroll 事件，调用外层的 "),s("code",[t._v("bs.disable()")]),t._v(" 来禁用外层的 bs。当内层的 bs 滚动到底部的时候，说明这个时候需要滚动外层的 bs，这个时候调用外层的 "),s("code",[t._v("bs.enable()")]),t._v(" 来激活外层，并且调用内层的 "),s("code",[t._v("bs.disable()")]),t._v(" 禁止内层滚动。其实仔细想一想，这个交互就跟原生 Web 的嵌套滚动行为表现一致，只不过浏览器帮你处理了各种滚动嵌套的逻辑，而在 BetterScroll 需要你自己通过派发的事件以及暴露的 API 来实现。")]),t._v(" "),s("blockquote",[s("p",[t._v("cube-ui 的 "),s("a",{attrs:{href:"https://didi.github.io/cube-ui/example/#/scroll/v-scrolls",target:"_blank",rel:"noopener noreferrer"}},[t._v("scroll"),s("OutboundLink")],1),t._v(" 组件对此场景给出了相应的解决思路。"),s("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/dev/src/components/scroll/scroll.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("代码在这"),s("OutboundLink")],1)])])])]),t._v(" "),s("h3",{attrs:{id:"【问题八】在纵向-bs-嵌套横向-bs-的场景-为什么在横向-bs-的区域竖向移动不会使得外层纵向-bs-的垂直滚动"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题八】在纵向-bs-嵌套横向-bs-的场景-为什么在横向-bs-的区域竖向移动不会使得外层纵向-bs-的垂直滚动"}},[t._v("#")]),t._v(" 【问题八】在纵向 bs 嵌套横向 bs 的场景，为什么在横向 bs 的区域竖向移动不会使得外层纵向 bs 的垂直滚动？")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("原因与"),s("strong",[t._v("问题二")]),t._v("类似，还是因为 "),s("code",[t._v("e.preventDefault()")]),t._v(" 影响了默认的滚动行为，导致外层的 bs 不会触发 touch 事件。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("解决办法就是配置内层的 bs 的 "),s("code",[t._v("eventPassthrough")]),t._v(" 属性，让其保持默认的原生竖向滚动，")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" innerBS "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("eventPassthrough")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vertical'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 保持纵向的原生浏览器滚动")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])]),t._v(" "),s("h3",{attrs:{id:"【问题九】国产浏览器中-横向-slide-切换卡顿或无效问题。"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#【问题九】国产浏览器中-横向-slide-切换卡顿或无效问题。"}},[t._v("#")]),t._v(" 【问题九】国产浏览器中，横向 slide 切换卡顿或无效问题。")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("原因")])]),t._v(" "),s("p",[t._v("国产浏览器大多数都会监听默认的横滑事件，以实现浏览器的快速“回退”和”前进“。")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("解决")])]),t._v(" "),s("p",[t._v("主要是使用一个 CSS 特性"),s("code",[t._v("touch-action")]),t._v("，如果是横向的滑动，将 "),s("code",[t._v("touch-action: pan-y")]),t._v(" CSS 设置在 "),s("code",[t._v("wrapper")]),t._v(" 上面，这样就可以避免横向的切换触发浏览器的默认行为。")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
    2.