平滑滚动 MDB Pro component

平滑滚动-Bootstrap 5和Material Design 2.0

Bootstrap平滑滚动是来自触发器的动画动作,例如按钮,链接或任何 其他可点击元素-到同一页面的其他位置。

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


基本例子

单击下面的链接以查看实时示例

要实现平滑滚动效果,请添加 data-mdb-smooth-scroll 属性指向您的链接。

Smooth Scroll to #section-1

Here it is #section-1


定制容器

通过添加 data-mdb-container 属性,您可以设置所需的容器 平滑滚动。

Smooth Scroll to #section-2

Here it is #section-2


自定义偏移

通过添加 data-mdb-offset 属性,您可以设置元素的自定义偏移量。

Smooth Scroll to #section-3

Here it is #section-3


自订时间

通过添加 data-mdb-duration 属性,您可以设置平滑的自定义持续时间 滚动。

Smooth Scroll to #section-4

Here it is #section-4


定制宽松

通过添加 data-mdb-easing ,您可以设置其他滚动条的运动选项

Smooth Scroll to #section-5

Here it is #section-5/p>


容器远离视口

当您在容器中放置 overflow:首先滚动远离视口链接 滚动到该容器,然后它将滚动容器。

Smooth Scroll to #section-6

Section to scroll is below:

Here it is #section-6/p>

平滑滚动 - API


用法

通过数据属性


        <a
          href="#section-1"
          data-mdb-smooth-scroll="smooth-scroll"
          data-mdb-container="#container-1"
          >Smooth Scroll</a
        >
      

通过JavaScript


        const smoothScroll = new mdb.SmoothScroll(document.getElementById('smooth-scroll'), {
        offset: ..., easing: ..., });
      

选件

Name Type Default Description
container String 'body' Changes container of scrolling element with overflow: scroll;.
duration Number '500' Changes duration of smooth scroll.
easing String 'linear' Changes motion type of smooth scroll, available easings: 'linear', 'easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInOutQuad' 'easeInOutCubic', 'easeInOutQuart', 'easeInOutQuint', 'easeOutQuad', 'easeOutCubic', 'easeOutQuart', 'easeOutQuint' .
offset Number '0' Changes offset from element

方法


        const instance = mdb.SmoothScroll.getInstance(document.getElementById('smooth-scroll'));
        setTimeout(() => { instance.cancelScroll(); }, 100);
      
Name Description Example
cancelScroll Manually cancels smooth scroll smoothScroll.cancelScroll();
dispose Manually disposes an instance smoothScroll.dispose();

大事记


        const smoothScroll = document.getElementById('smooth-scroll');
        smoothScroll.addEventListener('scrollEnd.mdb.smoothScroll', () => { // do something });
      
Name Description
scrollCancel.mdb.smoothScroll This event fires immediately after canceling smooth scrolling.
scrollEnd.mdb.smoothScroll This event fires immediately when the smooth scroll ends.
scrollStart.mdb.smoothScroll This event fires immediately when the smooth scroll is starting.

进口


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