|
7 | 7 | <meta name="generator" content="VuePress 1.4.1"> |
8 | 8 |
|
9 | 9 | <meta name="description" content="Vue.JS 的迷你但完美的自定义滚动条组件"> |
10 | | - <link rel="preload" href="/vue-custom-scrollbar/assets/css/0.styles.61e260ca.css" as="style"><link rel="preload" href="/vue-custom-scrollbar/assets/js/app.8c265f24.js" as="script"><link rel="preload" href="/vue-custom-scrollbar/assets/js/2.33f33591.js" as="script"><link rel="preload" href="/vue-custom-scrollbar/assets/js/6.ee98daf1.js" as="script"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/3.e78eb4a2.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/4.6830fafa.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/5.264cf4a9.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/7.9dc36c01.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/8.2d2e1d03.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/9.342e3d9c.js"> |
| 10 | + <link rel="preload" href="/vue-custom-scrollbar/assets/css/0.styles.61e260ca.css" as="style"><link rel="preload" href="/vue-custom-scrollbar/assets/js/app.30abf7d6.js" as="script"><link rel="preload" href="/vue-custom-scrollbar/assets/js/2.33f33591.js" as="script"><link rel="preload" href="/vue-custom-scrollbar/assets/js/6.ee98daf1.js" as="script"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/3.e78eb4a2.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/4.6830fafa.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/5.264cf4a9.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/7.9dc36c01.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/8.2d2e1d03.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/9.342e3d9c.js"> |
11 | 11 | <link rel="stylesheet" href="/vue-custom-scrollbar/assets/css/0.styles.61e260ca.css"> |
12 | 12 | </head> |
13 | 13 | <body> |
|
63 | 63 | </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
64 | 64 | </code></pre></div><h2 id="选项"><a href="#选项" class="header-anchor">#</a> 选项</h2> <h3 id="swicher-boolean"><a href="#swicher-boolean" class="header-anchor">#</a> <code>swicher {Boolean}</code></h3> <p>禁用或启用组件</p> <p><strong>Default</strong>: <code>true</code></p> <h3 id="tagname-string"><a href="#tagname-string" class="header-anchor">#</a> <code>tagname {String}</code></h3> <p>默认组件根元素为 <code>section</code>,设置该值可修改组件根元素为其他元素,如:<code>div</code></p> <p><strong>Default</strong>: <code>section</code></p> <h3 id="handlers-string"><a href="#handlers-string" class="header-anchor">#</a> <code>handlers {String[]}</code></h3> <p>滚动元素的事件列表</p> <p><strong>Default</strong>: <code>['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']</code></p> <h3 id="wheelspeed-number"><a href="#wheelspeed-number" class="header-anchor">#</a> <code>wheelSpeed {Number}</code></h3> <p>鼠标滚轮事件的滚动速度</p> <p><strong>Default</strong>: <code>1</code></p> <h3 id="wheelpropagation-boolean"><a href="#wheelpropagation-boolean" class="header-anchor">#</a> <code>wheelPropagation {Boolean}</code></h3> <p>如果此选项为 true,则当滚动到达边的末尾时,mousewheel 事件将传播到父元素。</p> <p><strong>Default</strong>: <code>true</code></p> <h3 id="swipeeasing-boolean"><a href="#swipeeasing-boolean" class="header-anchor">#</a> <code>swipeEasing {Boolean}</code></h3> <p>如果此选项为 true,则会滚动得比较平缓。</p> <p><strong>Default</strong>: <code>true</code></p> <h3 id="minscrollbarlength-number"><a href="#minscrollbarlength-number" class="header-anchor">#</a> <code>minScrollbarLength {Number?}</code></h3> <p>设置为整数值时,滚动条的滑块部分不会小于该像素数以下。</p> <p><strong>Default</strong>: <code>null</code></p> <h3 id="maxscrollbarlength-number"><a href="#maxscrollbarlength-number" class="header-anchor">#</a> <code>maxScrollbarLength {Number?}</code></h3> <p>设置为整数值时,滚动条的滑块部分不会超过该像素数。</p> <p><strong>Default</strong>: <code>null</code></p> <h3 id="scrollingthreshold-number"><a href="#scrollingthreshold-number" class="header-anchor">#</a> <code>scrollingThreshold {Number}</code></h3> <p>这将设置 <code>ps--scrolling-x</code> 和 <code>ps--scrolling-y</code>的停留时间阈值。在默认的 CSS 中,无论悬停状态如何,它们都会显示滚动条。单位是毫秒。</p> <p><strong>Default</strong>: <code>1000</code></p> <h3 id="usebothwheelaxes-boolean"><a href="#usebothwheelaxes-boolean" class="header-anchor">#</a> <code>useBothWheelAxes {Boolean}</code></h3> <p>设置为 true 时,且只有一个(垂直或水平)滚动条是可视的,则垂直和水平滚动都会影响滚动条。</p> <p><strong>Default</strong>: <code>false</code></p> <h3 id="suppressscrollx-boolean"><a href="#suppressscrollx-boolean" class="header-anchor">#</a> <code>suppressScrollX {Boolean}</code></h3> <p>设置为 true 时,无论内容宽度如何,X 轴上的滚动条都将不可用。</p> <p><strong>Default</strong>: <code>false</code></p> <h3 id="suppressscrolly-boolean"><a href="#suppressscrolly-boolean" class="header-anchor">#</a> <code>suppressScrollY {Boolean}</code></h3> <p>设置为 true 时,无论内容高度如何,Y 轴上的滚动条都将不可用。</p> <p><strong>Default</strong>: <code>false</code></p> <h3 id="scrollxmarginoffset-number"><a href="#scrollxmarginoffset-number" class="header-anchor">#</a> <code>scrollXMarginOffset {Number}</code></h3> <p>在不启用 X 轴滚动条的情况下,内容宽度可以超过容器宽度的像素数。</p> <p><strong>Default</strong>: <code>0</code></p> <h3 id="scrollymarginoffset-number"><a href="#scrollymarginoffset-number" class="header-anchor">#</a> <code>scrollYMarginOffset {Number}</code></h3> <p>在不启用 Y 轴滚动条的情况下,内容高度可以超过容器高度的像素数。</p> <p><strong>Default</strong>: <code>0</code></p> <h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <p>vue-custom-scrollbar 触发的自定义事件.</p> <h3 id="ps-scroll-y"><a href="#ps-scroll-y" class="header-anchor">#</a> <code>ps-scroll-y</code></h3> <p>当 y 轴向任一方向滚动时,此事件将触发。</p> <h3 id="ps-scroll-x"><a href="#ps-scroll-x" class="header-anchor">#</a> <code>ps-scroll-x</code></h3> <p>当 x 轴向任一方向滚动时,此事件将触发。</p> <h3 id="ps-scroll-up"><a href="#ps-scroll-up" class="header-anchor">#</a> <code>ps-scroll-up</code></h3> <p>向上滚动时会触发此事件。</p> <h3 id="ps-scroll-down"><a href="#ps-scroll-down" class="header-anchor">#</a> <code>ps-scroll-down</code></h3> <p>向下滚动时会触发此事件。</p> <h3 id="ps-scroll-left"><a href="#ps-scroll-left" class="header-anchor">#</a> <code>ps-scroll-left</code></h3> <p>滚动到左侧时会触发此事件。</p> <h3 id="ps-scroll-right"><a href="#ps-scroll-right" class="header-anchor">#</a> <code>ps-scroll-right</code></h3> <p>滚动到右侧时会触发此事件。</p> <h3 id="ps-y-reach-start"><a href="#ps-y-reach-start" class="header-anchor">#</a> <code>ps-y-reach-start</code></h3> <p>滚动到达 y 轴的起点时会触发此事件。</p> <h3 id="ps-y-reach-end"><a href="#ps-y-reach-end" class="header-anchor">#</a> <code>ps-y-reach-end</code></h3> <p>当滚动到达 y 轴的末尾时,此事件将触发(对于无限滚动非常有用)。</p> <h3 id="ps-x-reach-start"><a href="#ps-x-reach-start" class="header-anchor">#</a> <code>ps-x-reach-start</code></h3> <p>滚动到达 x 轴的起点时会触发此事件。</p> <h3 id="ps-x-reach-end"><a href="#ps-x-reach-end" class="header-anchor">#</a> <code>ps-x-reach-end</code></h3> <p>滚动到达 x 轴末端时会触发此事件。</p> <h2 id="自定义样式"><a href="#自定义样式" class="header-anchor">#</a> 自定义样式</h2> <p>请参考 <a href="https://github.com/utatti/perfect-scrollbar/blob/master/css/perfect-scrollbar.css" target="_blank" rel="noopener noreferrer">perfect-scrollbar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,然后在你的项目覆盖对应 class 的样式</p> <h2 id="帮助台"><a href="#帮助台" class="header-anchor">#</a> 帮助台</h2> <p>如果您有任何想法改进此项目或使用此项目的任何问题,请随时提交 <a href="https://github.com/binaryify/vue-custom-scrollbar/issues" target="_blank" rel="noopener noreferrer">issue<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>对于常见的问题, 这里有一个 <a href="https://github.com/utatti/perfect-scrollbar/wiki/FAQ" target="_blank" rel="noopener noreferrer">FAQ<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 维基页面. 请在提交 issues 前查看该页面。</p> <p>请理解,解决问题可能需要一段时间。上传 PR 将是解决问题的最快方法。</p> <h2 id="ie-支持"><a href="#ie-支持" class="header-anchor">#</a> IE 支持</h2> <p>该插件支持现代浏览器,包括 Edge 和 IE11,但在 IE11 中可能存在一些问题,主要是因为 IE 渲染错误涉及滚动属性上的同步更新。在 |
65 | 65 | <a href="https://github.com/utatti/perfect-scrollbar/wiki/Caveats" target="_blank" rel="noopener noreferrer">Caveats<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 也提到了这个问题 。</p> <p>不支持 IE <11,并且不接受用于修复 IE <= 10 中的问题的补丁。如果想支持旧的 IE,请 fork 此项目并在本地进行修改。</p> <h2 id="更多"><a href="#更多" class="header-anchor">#</a> 更多</h2> <p>请参考 <a href="https://github.com/utatti/perfect-scrollbar" target="_blank" rel="noopener noreferrer">perfect-scrollbar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="license"><a href="#license" class="header-anchor">#</a> License</h2> <p><a href="https://github.com/Binaryify/vue-custom-scrollbar/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> |
66 | | - <script src="/vue-custom-scrollbar/assets/js/app.8c265f24.js" defer></script><script src="/vue-custom-scrollbar/assets/js/2.33f33591.js" defer></script><script src="/vue-custom-scrollbar/assets/js/6.ee98daf1.js" defer></script> |
| 66 | + <script src="/vue-custom-scrollbar/assets/js/app.30abf7d6.js" defer></script><script src="/vue-custom-scrollbar/assets/js/2.33f33591.js" defer></script><script src="/vue-custom-scrollbar/assets/js/6.ee98daf1.js" defer></script> |
67 | 67 | </body> |
68 | 68 | </html> |
0 commit comments