机车滚动:检测到元素但数据滚动速度不起作用

问题描述

我已经为本地测试项目安装了 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 (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...