Startsida Utforska Hjälp
Registrera dig Logga in
wicresoft
/
doc_project
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: 9cd9c7d1d5
Grenar Taggar
doc_project
/
better-scroll-docs
/
assets
/
js
/
79.025583e1.js

79.025583e1.js 72 KB
Historik Rå

1 
  1. (window.webpackJsonp=window.webpackJsonp||[]).push([[79],{784:function(t,s,a){"use strict";a.r(s);var e=a(41),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[t._v("#")]),t._v(" Options")]),t._v(" "),s("p",[t._v("BetterScroll supports rich options configuration, you can pass them in the second parameter when initializing, for example:")]),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("import")]),t._v(" BScroll "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@better-scroll/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scroll "),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(",")]),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("scrollY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),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")])])]),s("p",[t._v("This implements a list of vertical clickable scrolling effects. so let's list the parameters supported by BetterScroll.")]),t._v(" "),s("h2",{attrs:{id:"startx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#startx"}},[t._v("#")]),t._v(" startX")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(":  "),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("Details")]),t._v(": Initialize the postion in the horizontal axis direction.")])]),t._v(" "),s("h2",{attrs:{id:"starty"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#starty"}},[t._v("#")]),t._v(" startY")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(":  "),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("Details")]),t._v(": Initialize the postion in the vertical axis direction.")])]),t._v(" "),s("h2",{attrs:{id:"scrollx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scrollx"}},[t._v("#")]),t._v(" scrollX")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When set to true, horizontal scrolling would be enabled")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": This configuration is invalid when setting "),s("RouterLink",{attrs:{to:"/en-US/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" to 'horizontal'.")],1)]),t._v(" "),s("h2",{attrs:{id:"scrolly"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scrolly"}},[t._v("#")]),t._v(" scrollY")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When set to true, vertical scrolling would be enabled")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": This configuration is invalid when setting "),s("RouterLink",{attrs:{to:"/en-US/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" to 'vertical'.")],1)]),t._v(" "),s("h2",{attrs:{id:"freescroll"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#freescroll"}},[t._v("#")]),t._v(" freeScroll")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": By default, because human fingers cannot perform absolute vertical or horizontal movement, there will be horizontal and vertical offsets during a finger operation. The internal default will abandon the smaller offset direction , Keep scrolling in the other direction. But in some scenes, we need to calculate the horizontal and vertical finger offset distances at the same time, instead of only calculating the direction with a larger offset. At this time, we only need to set "),s("code",[t._v("freeScroll")]),t._v(" to true.")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(":  This configuration is invalid when "),s("RouterLink",{attrs:{to:"/en-US/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" isn't set to empty.")],1),t._v(" "),s("li",[s("strong",[t._v("Examples")])])]),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 comment"}},[t._v("// finger startpoint -> e1: { pageX: 120, pageY: 120 }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// finger endpoint -> e2: { pageX: 121, pageY: 140 }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// offsetX:  e2.pageX - e1.pageX = 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// offsetY:  e2.pageY - e1.pageY = 20")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// if freeScroll is false,  due to offsetY > offsetX + directionLockThreshold")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// offsetX is fixed to be 0, only calculate offsetY, thus do a vertical scroll!")]),t._v("\n")])])]),s("h2",{attrs:{id:"directionlockthreshold"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#directionlockthreshold"}},[t._v("#")]),t._v(" directionLockThreshold")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("5")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": when "),s("code",[t._v("freeScroll")]),t._v(" is false, we need to lock the scrolling only in one direction,  we calculate the numerical difference between the absolute values of horizontal axis and vertical axis' scrolling distance at the initialization time of scrolling. When the value of the numerical difference is greater than "),s("code",[t._v("directionLockThreshold")]),t._v(", the lock direction can be determined.")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": If "),s("RouterLink",{attrs:{to:"/en-US/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" is set, "),s("code",[t._v("directionLockThreshold")]),t._v(" is invalid and will always be 0.")],1)]),t._v(" "),s("h2",{attrs:{id:"eventpassthrough"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#eventpassthrough"}},[t._v("#")]),t._v(" eventPassthrough")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("string")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("''")])]),t._v(" "),s("li",[t._v("Optional value: "),s("code",[t._v("vertical | horizontal")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Sometimes we want to preserve native vertical scroll but being able to add an horizontal BetterScroll (maybe a carousel). Set this to 'vertical' and the BetterScroll area will react to horizontal swipes only. Vertical swipes will naturally scroll the whole page. Contrarily, set this to 'horizontal' when you want to keep natural horizontal scroll.")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": The setting of  "),s("code",[t._v("eventPassthrough")]),t._v(" will cause some other settings to be invalid, be careful when using it.")])]),t._v(" "),s("h2",{attrs:{id:"click"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#click"}},[t._v("#")]),t._v(" click")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": To override the native scrolling BetterScroll has to inhibit some default browser behaviors, such as mouse clicks. If you want your application to respond to the click event you have to explicitly set this option to "),s("code",[t._v("true")]),t._v(". And then BetterScroll will add a private attribute called "),s("code",[t._v("_constructed")]),t._v(" to the dispatched event whose value is true.")])]),t._v(" "),s("h2",{attrs:{id:"dblclick"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dblclick"}},[t._v("#")]),t._v(" dblclick")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean | Object")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Send dblclick event. When configured to true, by default the two times click delay is 300 ms. If configured to an object, the "),s("code",[t._v("delay")]),t._v(" can be modified.")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dblclick")]),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  \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"tap"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tap"}},[t._v("#")]),t._v(" tap")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("string")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("''")])]),t._v(" "),s("li",[s("strong",[t._v("Details")]),t._v(": Since BetterScroll will block the native click event, we can set tap to 'tap', which will dispatch a tap event when the region is clicked. You can listen to it as if it were listening to native events.")])]),t._v(" "),s("h2",{attrs:{id:"bounce"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bounce"}},[t._v("#")]),t._v(" bounce")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean | Object")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Details")]),t._v(": When the content element meets the boundary it performs a small bounce animation. Setting this to true will enable the animation.")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v(" \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bounce")]),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 \t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("top")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n \t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bottom")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n \t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("left")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n \t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("right")]),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 \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("bounce")]),t._v(" can support the effect of closing the back of some edges. You can set the "),s("code",[t._v("key")]),t._v(" of the corresponding side to "),s("code",[t._v("false")]),t._v(".")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("If you want to conveniently set all edges to "),s("strong",[t._v("true")]),t._v(" or "),s("strong",[t._v("false")]),t._v(", you only need to set "),s("code",[t._v("bounce")]),t._v(" to "),s("strong",[t._v("true")]),t._v(" or "),s("strong",[t._v("false")]),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"bouncetime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bouncetime"}},[t._v("#")]),t._v(" bounceTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": Default: "),s("code",[t._v("800")]),t._v(" (ms, modification is not recommended)")]),t._v(" "),s("li",[s("strong",[t._v("Details")]),t._v(": Set the duration in millisecond of the bounce animation.")])]),t._v(" "),s("h2",{attrs:{id:"momentum"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#momentum"}},[t._v("#")]),t._v(" momentum")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": If setted to true, you can turn on the momentum animation when the user quickly flicks on screen.")])]),t._v(" "),s("h2",{attrs:{id:"momentumlimittime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#momentumlimittime"}},[t._v("#")]),t._v(" momentumLimitTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("300")]),t._v(" (ms)")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Only when the time of the user's flicking on screen is lower than "),s("code",[t._v("momentumLimitTime")]),t._v(" resulting in the momentum animation.")])]),t._v(" "),s("h2",{attrs:{id:"momentumlimitdistance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#momentumlimitdistance"}},[t._v("#")]),t._v(" momentumLimitDistance")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("15")]),t._v(" (px)")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Only when the distance of the user's flicking on screen is greater than "),s("code",[t._v("momentumLimitTime")]),t._v(" resulting in the momentum animation.")])]),t._v(" "),s("h2",{attrs:{id:"swipetime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#swipetime"}},[t._v("#")]),t._v(" swipeTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("2500")]),t._v(" (ms)")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Set the duration in millisecond of the momentum animation.")])]),t._v(" "),s("h2",{attrs:{id:"swipebouncetime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#swipebouncetime"}},[t._v("#")]),t._v(" swipeBounceTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("500")]),t._v(" (ms)")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Set the entire bounce animation time when the content element meets the boundary in the case of running a momentum animation.")])]),t._v(" "),s("h2",{attrs:{id:"deceleration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#deceleration"}},[t._v("#")]),t._v(" deceleration")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("0.0015")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Represent the deceleration of the momentum animation.")])]),t._v(" "),s("h2",{attrs:{id:"flicklimittime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flicklimittime"}},[t._v("#")]),t._v(" flickLimitTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("200")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Sometimes we want to cpture the user's flick action (slide a short distance in a short time). Only when the time of the user slide on screen is shorter than "),s("code",[t._v("flickLimitTime")]),t._v(", it is considered as a flick action.")])]),t._v(" "),s("h2",{attrs:{id:"flicklimitdistance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flicklimitdistance"}},[t._v("#")]),t._v(" flickLimitDistance")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("100")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Only when the distance of the user slide on screen is shorter than "),s("code",[t._v("flickLimitDistance")]),t._v(", it is considered as a flick action")])]),t._v(" "),s("h2",{attrs:{id:"resizepolling"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resizepolling"}},[t._v("#")]),t._v(" resizePolling")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("60")]),t._v(" (ms)")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When you resize the window BetterScroll has to recalculate elements position and dimension. This might be a pretty daunting task for the poor little fella. To give it some rest the polling is set to 60 milliseconds and it is reasonable value.")])]),t._v(" "),s("h2",{attrs:{id:"probetype"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#probetype"}},[t._v("#")]),t._v(" probeType")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("Optional Value")]),t._v(": "),s("code",[t._v("1 | 2 | 3")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Deciding whether to dispatch the scroll event, this has an impact on the performance of the page, especially in the mode where "),s("code",[t._v("useTransition")]),t._v(" is true.")])]),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 comment"}},[t._v("// There are two scenarios for dispatching scroll:")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. The finger acts on the scrolling area (content DOM),")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. Invoke the scrollTo method or trigger the momentum scroll animation (in fact, the implementation is still Invoking the scrollTo method)")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For the v2.1.0, the probeType has been unified")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The probeType is:")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0, scroll event will not be dispatched at any time，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1, and only when the finger is moving on the scroll area, a scroll event is dispatched every momentumLimitTime milliseconds.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2, and only when the finger is moving on the scroll area, a scroll event is dispatched all the time.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3, scroll events are dispatched at any time, including invoking scrollTo or triggering momentum")]),t._v("\n")])])]),s("h2",{attrs:{id:"preventdefault"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#preventdefault"}},[t._v("#")]),t._v(" preventDefault")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Whether or not to "),s("code",[t._v("preventDefault()")]),t._v(" when events are fired. This should be left "),s("code",[t._v("true")]),t._v(" unless you really know what you are doing.")])]),t._v(" "),s("h2",{attrs:{id:"preventdefaultexception"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#preventdefaultexception"}},[t._v("#")]),t._v(" preventDefaultException")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": Object")]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ }")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": BetterScroll will inhibit the native scrolling and meanwhile inhibit some native components' default behaviours. In this situation, we can't 'preventDefault' on these elements, so we can configure 'preventDefaultException'. Default "),s("code",[t._v("{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/}")]),t._v(" represents that default behaviours of elements with tagnames like 'input', 'textarea', 'button', 'select', 'audio' will not be inhibited")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": This is a pretty powerful option. Its key is the attribute value of DOM elements, the corresponding value can be a regular expression. For example, if we want to configure the element whose class name is 'test', then the configuration is "),s("code",[t._v("{className:/(^|\\s)test(\\s|$)/}")]),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"tagexception"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tagexception"}},[t._v("#")]),t._v(" tagException")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("Object")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("{ tagName: /^TEXTAREA$/ }")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": If BetterScroll nests form elements such as "),s("code",[t._v("textarea")]),t._v(", the user's expectation should be that sliding textarea should not cause bs scrolling. If the manipulated DOM (eg:textarea tag) hits the configured rule, "),s("code",[t._v("bs")]),t._v(" won't scroll.")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": This is a pretty powerful option. Its key is the attribute value of DOM elements, the corresponding value can be a regular expression. For example, if we want to configure the element whose class name is 'test', then the configuration is "),s("code",[t._v("{className:/(^|\\s)test(\\s|$)/}")]),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"hwcompositing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hwcompositing"}},[t._v("#")]),t._v(" HWCompositing")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": This option tries to put the content element on the hardware layer by appending "),s("code",[t._v("translateZ(1px)")]),t._v(" to the transform CSS property. This greatly increases performance especially on mobile and achieve a good scrolling effect.")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": Only browsers that support enabling hardware acceleration has the effect.")])]),t._v(" "),s("h2",{attrs:{id:"usetransition"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usetransition"}},[t._v("#")]),t._v(" useTransition")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Whether to use CSS3 transition animation. If setted to false, the engine will use "),s("code",[t._v("requestAnimationFrame")]),t._v(" to do animation.")])]),t._v(" "),s("h2",{attrs:{id:"bindtowrapper"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bindtowrapper"}},[t._v("#")]),t._v(" bindToWrapper")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": The "),s("code",[t._v("touchmove")]),t._v(" event is normally bound to the document and not the scroll wrapper. When you move the cursor out of the wrapper the scrolling keeps going(only works in PC). This is usually what you want, but you can also bind the move event to wrapper itself. Doing so as soon as the cursor leaves the wrapper the scroll stops.")]),t._v(" "),s("li",[s("strong",[t._v("Note")]),t._v(": For the mobile, even if the touchmove event is bound to the wrapper, the wrapper can still be moved if the finger leaves the wrapper.")])]),t._v(" "),s("h2",{attrs:{id:"disablemouse"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disablemouse"}},[t._v("#")]),t._v(" disableMouse")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": get the result by current browser environment")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When in mobile environment (supporting touch event),  disableMouse will be "),s("code",[t._v("true")]),t._v(" and mouse event will not be listened. While in PC environment, disableMouse will be "),s("code",[t._v("false")]),t._v(" and mouse event will be listened.")])]),t._v(" "),s("h2",{attrs:{id:"disabletouch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabletouch"}},[t._v("#")]),t._v(" disableTouch")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": get the result by current browser environment")]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When in mobile environment (supporting touch event),  "),s("code",[t._v("disableTouch")]),t._v(" will be "),s("code",[t._v("false")]),t._v(" and touch event will be listened. While in PC environment, "),s("code",[t._v("disableMouse")]),t._v(" will be "),s("code",[t._v("true")]),t._v(" and touch event will not be listened. We suggest not modifying this unless you konw what you are doing.")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("Considering some specific scenarios of the user, such as "),s("strong",[t._v("the tablet needs to support the touch event, the tablet with mouse has to support the mouse event")]),t._v(", In other words, if you need to listen to the touch and mouse events at the same time, then the instantiation of BetterScroll needs to be configured as follows:")]),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("disableMouse")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),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("disableTouch")]),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("Due to the different bottom-level implementation logic of different devices and different browser environments, BetterScroll's internal calculations of whether to listen to "),s("code",[t._v("touch")]),t._v(" or "),s("code",[t._v("mouse")]),t._v(" events may make wrong judgment, so you can solve this type of problem according to the above option configuration.")])]),t._v(" "),s("h2",{attrs:{id:"autoblur"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autoblur"}},[t._v("#")]),t._v(" autoBlur")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": It will auto blur the active element(input、textarea) before scroll start.")])]),t._v(" "),s("h2",{attrs:{id:"stoppropagation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stoppropagation"}},[t._v("#")]),t._v(" stopPropagation")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Whether stop event propagation. It is often used in nested scroll scenes.")])]),t._v(" "),s("h2",{attrs:{id:"bindtotarget"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bindtotarget"}},[t._v("#")]),t._v(" bindToTarget")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Bind touch or mouse events to the "),s("code",[t._v("content")]),t._v(" element instead of the container "),s("code",[t._v("wrapper")]),t._v(", which is mostly used in "),s("RouterLink",{attrs:{to:"/en-US/plugins/movable.html"}},[t._v("movable")]),t._v(".")],1)]),t._v(" "),s("h2",{attrs:{id:"autoenddistance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autoenddistance"}},[t._v("#")]),t._v(" autoEndDistance")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("5")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When the finger operation is crazy, the "),s("code",[t._v("touchend")]),t._v(" event may not be triggered when sliding out of the viewport, so the function of autoEndDistance is to automatically call the touchend event when the finger is about to leave the current viewport. When the default distance is 5px from the boundary, the scrolling ends.")])]),t._v(" "),s("h2",{attrs:{id:"outofboundarydampingfactor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#outofboundarydampingfactor"}},[t._v("#")]),t._v(" outOfBoundaryDampingFactor")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("1 / 3")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When out of boundary, the damping behavior is performed. The smaller the damping factor, the greater the resistance. Value range: [0, 1].")])]),t._v(" "),s("h2",{attrs:{id:"specifiedindexascontent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#specifiedindexascontent"}},[t._v("#")]),t._v(" specifiedIndexAsContent "),s("Badge",{attrs:{text:"2.0.4"}})],1),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": Specify the child element corresponding to the index of the "),s("code",[t._v("wrapper")]),t._v(" as the "),s("code",[t._v("content")]),t._v(". By default, BetterScroll uses the first child element of the "),s("code",[t._v("wrapper")]),t._v(" as the content.")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten1-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten1-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten2-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("2.1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten2-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("2.2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For the above DOM structure, when BetterScroll version <= 2.0.3, only div.content1 is used as content")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// When the version is >= 2.0.4, content can be specified through 'specifiedIndexAsContent'")]),t._v("\n\n"),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("specifiedIndexAsContent")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use div.content2 as BetterScroll's content")]),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("h2",{attrs:{id:"quadrant"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#quadrant"}},[t._v("#")]),t._v(" quadrant "),s("Badge",{attrs:{text:"2.3.0"}})],1),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Type")]),t._v(": "),s("code",[t._v("1 | 2 | 3 | 4")])]),t._v(" "),s("li",[s("strong",[t._v("Default")]),t._v(": "),s("code",[t._v("1")])]),t._v(" "),s("li",[s("strong",[t._v("Usage")]),t._v(": When the ancestor elements of BetterScroll's wrapper DOM are forced to rotate by CSS, the original displacements in the x and y directions need to perform a certain transformation to ensure a reasonable interaction.")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* wrapper's parent DOM rotated*/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("90deg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),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("quadrant")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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("ol",[s("li",[t._v("When the rotation angle of the parent element or ancestor element of the "),s("code",[t._v("wrapper")]),t._v(" is (315, 45], the quadrant can keep the default value;")]),t._v(" "),s("li",[t._v("When the rotation angle of the parent element or ancestor element of the "),s("code",[t._v("wrapper")]),t._v(" is (45, 135],Especially "),s("strong",[t._v("90 degrees")]),t._v(",  the quadrant "),s("strong",[t._v("must")]),t._v(" be "),s("code",[t._v("2")]),t._v(";")]),t._v(" "),s("li",[t._v("When the rotation angle of the parent element or ancestor element of the "),s("code",[t._v("wrapper")]),t._v(" is (135, 225],Especially "),s("strong",[t._v("180 degrees")]),t._v(",  the quadrant "),s("strong",[t._v("must")]),t._v(" be "),s("code",[t._v("3")]),t._v(";")]),t._v(" "),s("li",[t._v("When the rotation angle of the parent element or ancestor element of the "),s("code",[t._v("wrapper")]),t._v(" is (225, 315],Especially "),s("strong",[t._v("270 degrees")]),t._v(",  the quadrant "),s("strong",[t._v("must")]),t._v(" be "),s("code",[t._v("4")]),t._v(";")]),t._v(" "),s("li",[t._v("When the rotation angle is special, such as 30 degrees or 200 degrees, you may not be satisfied with the built-in transformation logic. You can customize your own transformation logic through the "),s("code",[t._v("coordinateTransformation")]),t._v(" hook.")])]),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("quadrant")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// default value")]),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("\nbs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("actions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n   bs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("actions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eventTypes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("coordinateTransformation"),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 parameter"}},[t._v("transformateDeltaData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),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 comment"}},[t._v("// get user finger moved distance")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" originDeltaX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaX\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" originDeltaY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaY\n\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// apply transformation")]),t._v("\n      transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" originDeltaY\n      transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" originDeltaX\n\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// transformateDeltaData.deltaX will be used as content DOM style's translateX")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// transformateDeltaData.deltaY will be used as content DOM style's translateY")]),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(")")]),t._v("\n")])])]),s("p",[t._v("For example: Use CSS to flip the horizontal scrolling BetterScroll.")]),t._v(" "),s("demo",{attrs:{"qrcode-url":"core/horizontal-rotated"}},[s("template",{slot:"code-template"},[s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("horizontal-rotated-container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("description"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Flipping layout via CSS"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll-wrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll-content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("num in nums"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("num"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{num}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])])])])])]),t._v(" "),s("template",{slot:"code-script"},[s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/ecmascript-6"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BScroll "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@better-scroll/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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 keyword"}},[t._v("return")]),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("nums")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),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("span",{pre:!0,attrs:{class:"token function"}},[t._v("mounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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 keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeDestroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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 keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("destroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),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 function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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 keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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 keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll"),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("scrollX")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),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("scrollY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// v2.3.0")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("quadrant")]),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("// rotate180")]),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("span",{pre:!0,attrs:{class:"token punctuation"}},[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("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])])])])])]),t._v(" "),s("template",{slot:"code-style"},[s("div",{staticClass:"language-styl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-styl"}},[s("code",[t._v("<style lang="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stylus"')]),t._v(" rel="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stylesheet/stylus"')]),t._v(" scoped>\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flipping by CSS */")]),t._v("\n.scroll-wrapper")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token func"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".horizontal-rotated-container")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".description")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("40")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),t._v(" center")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".scroll-wrapper")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("250")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),t._v(" relative")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("overflow")]),t._v(" hidden")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("white-space")]),t._v(" nowrap")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" auto")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")]),t._v(" solid "),s("span",{pre:!0,attrs:{class:"token hexcode"}},[t._v("#ccc")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".scroll-content")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),t._v(" inline-block")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".scroll-item")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("24")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),t._v(" bold")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),t._v(" center")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),t._v(" inline-block")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("&:nth-child(2n)")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token hexcode"}},[t._v("#f3f5f7")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("&:nth-child(2n+1)")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token hexcode"}},[t._v("#42b983")])]),t._v("\n</style>")])])])]),t._v(" "),s("core-horizontal-rotated",{attrs:{slot:"demo"},slot:"demo"})],2)],1)}),[],!1,null,null,null);s.default=n.exports}}]);
    2.