问题描述
我已经为本地测试项目安装了 LocomotiveScroll
首先:
npm install LocomotiveScroll
然后:
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),smooth: true,repeat: true
});
添加了 HTML 和 CSS 进行测试,但检测到元素(“is-in-view”)并且 data-scroll-class 有效,但与 data-scroll-speed 无关
<div data-scroll-container>
<section class="s1" data-scroll-section>
<h1>hey</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium at sunt magnam cum quam natus,recusandae consequuntur voluptate reprehenderit,quis vitae. Eaque pariatur cumque provident,cum animi sapiente deleniti quae?</p>
</section>
<section class="s2" data-scroll-section>
<h2>What's up?</h2>
<p class="custom-p" data-scroll data-scroll-class="scroll-class">Lorem ipsum,dolor sit amet consectetur adipisicing elit. Dolores,at similique nobis nulla sit quos deserunt ipsa voluptates consequatur,molestiae hic perspiciatis illum temporibus qui autem dicta perferendis,distinctio provident.</p>
<span data-scroll data-scroll-speed="4">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Itaque,nulla ipsum veniam labore ipsam voluptatem nesciunt voluptatum cum. Sequi molestiae expedita adipisci natus excepturi nesciunt,vel provident neque a perferendis?</span>
</section>
<section class="s1" data-scroll-section>
<h1>hey</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium at sunt magnam cum quam natus,cum animi sapiente deleniti quae?</p>
</section>
</div>
CSS:
* { Box-sizing: border-Box; }
body { height: 100vh; background: red; color: #fff; }
section{ height: 100vh; padding: 8rem; }
.s1 { background: blue;}
.s2 { background: green;}
.custom-p{
opacity: 0;
transition: all 1s;
position: relative;
transform: translateY(60px);
}
.scroll-class{
opacity: 1;
transform: translateY(0);
}
有什么建议吗?谢谢,任何建议都很重要
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)