滚动条r MDB Pro component

滚动条-Bootstrap 5和Material Design 2.0组件

滚动条方法,可让您创建自定义滚动条。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

添加时会自动初始化滚动条 容器的 data-mdb-perfect-scrollbar ='true'属性。

...

选件

JavaScript初始化

您可以使用JavaScript轻松启动滚动条。你必须调用 mdb.PerfectScrollbar()并在其中包含选项。

...

资料属性

您可以使用带有data-mdb-attributes选项的选项轻松启动滚动条。您必须添加 data-mdb-perefect-scrollbar 到包装器。如果要添加选项 data-mdb-attr,您必须添加例如 data-mdb-suppress-scroll-x ='true'到 你的钱币。。

...

大事记

PerfectScrollbar调度自定义事件。

  • ScrollX
  • ScrollY
  • ScrollUp
  • ScrollDown
  • ScrollLeft
  • ScrollRight
  • ScrollXEnd
  • ScrollYEnd
  • ScrollXStart
  • ScrollYStart

...

Usage

通过数据属性


        <div data-mdb-perfect-scrollbar="true" data-mdb-handlers="click-rail"
          style="position: relative; width: 600px; height: 400px;">
          <img src="https://mdbootstrap.com/img/new/slides/041.webp" alt="..." style="height: 700px; width: 1000px;" />
        </div>
      

通过JavaScript


        var myPs = new mdb.PerfectScrollbar(document.getElementById('myPsID'), options)
      

通过jQuery

注意:默认情况下,MDB 包含jQuery,您必须 自行添加到项目中。


        $('.example-class').perfectScrollbar(options);
      

选件

Name Type Default Description
handlers String[] ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'] It is a list of handlers to scroll the element.
wheelSpeed Number 1 The scroll speed applied to mousewheel event.
wheelPropagation Boolean true If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.
swipeEasing Boolean true If this option is true, swipe scrolling will be eased.
minScrollbarLength Boolean null When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.
maxScrollbarLength Boolean null When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.
scrollingThreshold Number 1000 This sets threshold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond.
suppressScrollX Boolean false When set to true, the scrollbar in X-axis will not be available, regardless of the content width.
suppressScrollY Boolean false When set to true, the scroll bar in Y-axis will not be available, regardless of the content height.
scrollXMarginOffset Number 0 The number of pixels the content width can surpass the container width without enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so that X-axis scroll bar is not enabled just because of a few pixels.
scrollYMarginOffset Number 0 The number of pixels the content width can surpass the container width without enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so that X-axis scroll bar is not enabled just because of a few pixels.

方法

Name Description Example
dispose Destroy ps myPs.dispose()
update Update ps myPs.update()

        var myPs = document.getElementById('myPsID')
        var ps = new mdb.PerfectScrollbar(myPs)
        ps.dispose()
      

大事记

Name Description
scrollX.mdb.ps This event fires when the x-axis is scrolled in either direction.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollX.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollY.mdb.ps This event fires when the y-axis is scrolled in either direction.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollY.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollUp.mdb.ps This event fires when scrolling upwards.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollUp.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollDown.mdb.ps This event fires when scrolling downwards.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollDown.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollLeft.mdb.ps This event fires when scrolling to the left.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollRight.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollRight.mdb.ps This event fires when scrolling to the right.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollLeft.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollLeft.mdb.ps This event fires when scrolling to the left.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollRight.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollYStart.mdb.ps This event fires when scrolling to the right.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollLeft.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollYStart.mdb.ps This event fires when scrolling reaches the start of the y-axis.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollYStart.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollXStart.mdb.ps This event fires when scrolling reaches the start of the x-axis.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollXStart.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollXEnd.mdb.ps This event fires when scrolling reaches the end of the x-axis.

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollXEnd.mdb.ps', (e) => {
          // do something...
        })
      

Name Description
scrollYEnd.mdb.ps This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).

        var myPs = document.getElementById('element-id')
        myPs.addEventListener('scrollYEnd.mdb.ps', (e) => {
          // do something...
        })
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { PerfectScrollbar } from 'mdb-ui-kit';