滚动监听

在滚动页面时,触发一些事件。

滚动监听动画

滚动监听组件监听页面滚动,并触发基于滚动位置的事件。例如,当你向下滚动页面时,你可以使首次出现在视窗中的一个元素触发一个平滑淡入的动画。

Data 属性 描述
data-scrollspy="{cls:'MY-CLASS'}" 只有元素首次出现在视窗时才应用这个属性中的 class。
data-scrollspy="{cls:'MY-CLASS', repeat: true}" 元素每次出现在视窗中时,都应用这个类。
data-scrollspy="{cls:'MY-CLASS', delay: 300}" 添加以毫秒为单位的动画延迟。

通常,动画组件中的类与滚动监视一起搭配使用。

示例

下面的例字使用了repeat: true 选项。向上或向下滚动可以看到被触发的动画效果。

淡入

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

由小变大

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

由大变小

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

顶部滑入

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

底部滑入

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

右边滑入

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

左边滑入

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

代码

<div data-scrollspy="{cls:'animation-fade'}">...</div>
<div data-scrollspy="{cls:'animation-fade', repeat: true}">...</div>
<div data-scrollspy="{cls:'animation-fade', delay:300, repeat: true}">...</div>

你还可以将多个需要添加滚动监听效果的元素编成一组,这样就不必分别为每个元素添加 data 属性了。只需要添加 data-scollspy"{target:'MY-CLASS'}" 属性到容器元素,将 target 选项指向容器中你想要添加动画效果的条目。

示例

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

条目

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

代码

<div data-scrollspy="{cls:'animation-fade', target:'.my-class', delay:300}">
    <!--此条目将不延迟-->
    <div class="my-class">...</div>
    <!--此条目将延迟 300 毫秒-->
    <div class="my-class">...</div>
    <!--此条目将延迟 600 毫秒-->
    <div class="my-class">...</div>
</div>

滚动导航

示例

段落一

Whatever obstacles I found made me fight all the harder. But it would have been impossible for me to fight at all, except that I was sustained by the personal and deep-rooted belief that my fight had a chance. It had a chance because it took place in a free society. Not once was I forced to face and fight an immovable object. Not once was the situation so cast-iron rigid that I had no chance at all. Free minds and human hearts were at work all around me; and so there was the probability of improvement. I look at my children now, and know that I must still prepare them to meet obstacles and prejudices.

段落二

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

段落三

Whatever obstacles I found made me fight all the harder. But it would have been impossible for me to fight at all, except that I was sustained by the personal and deep-rooted belief that my fight had a chance. It had a chance because it took place in a free society. Not once was I forced to face and fight an immovable object. Not once was the situation so cast-iron rigid that I had no chance at all. Free minds and human hearts were at work all around me; and so there was the probability of improvement. I look at my children now, and know that I must still prepare them to meet obstacles and prejudices.

段落四

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

段落五

Whatever obstacles I found made me fight all the harder. But it would have been impossible for me to fight at all, except that I was sustained by the personal and deep-rooted belief that my fight had a chance. It had a chance because it took place in a free society. Not once was I forced to face and fight an immovable object. Not once was the situation so cast-iron rigid that I had no chance at all. Free minds and human hearts were at work all around me; and so there was the probability of improvement. I look at my children now, and know that I must still prepare them to meet obstacles and prejudices.

段落六

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

段落七

Whatever obstacles I found made me fight all the harder. But it would have been impossible for me to fight at all, except that I was sustained by the personal and deep-rooted belief that my fight had a chance. It had a chance because it took place in a free society. Not once was I forced to face and fight an immovable object. Not once was the situation so cast-iron rigid that I had no chance at all. Free minds and human hearts were at work all around me; and so there was the probability of improvement. I look at my children now, and know that I must still prepare them to meet obstacles and prejudices.

段落八

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。我的奋斗有希望,因为这是一个自由的社会。在这里,我不止一次遇到过无法逾越的障碍,也不止一次经历过令人绝望的境况。但那时,思想与心灵的自由便能起作用,让我摆脱困境。如今我看着自己的孩子们,我知道我仍需要他们准备面对困难与歧视。

代码

<div data-scrollnav="{closest:'li', target:'#scrollnav1'}">
    <h4 id="T1">T1</h4>
    <p>...</p>
    <h4 id="T2">T2</h4>
    <p>...</p>
    ...
</div>

<ul id="scrollnav1">
    <li class="active"><a href="#T1">T1</a></li>
    <li class=""><a href="#T2">T2</a></li>
    ...
</ul>