滚动方向错误机车滚动

问题描述

我正在尝试实现与本示例相同的滚动效果。

Section2

根据文档，我添加了data-scroll-direction =“ horizo​​ntal”，但是其方向相反，在向下滚动时它从右向左移动，但应该以其他方式移动。也没有得到如何用js控制transform，translateX / translateY吗？如果我想要自定义轨迹怎么办？

HTML：

<main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">?
                        </div>
                    </div>
                </div>
            </section>
</main>

JS：

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),class: 'is-inview',smooth: true,getDirection: true
 

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),getDirection: true
      // lerp: 0.1,});


      scroll.update();

/* !locomotive-scrollv3.6.1|MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
  position: relative;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s,opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,.has-scroll-scrolling .c-scrollbar,.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


section {
  width: 100%;
  height: 100vh;
  padding: 1em;
  position: relative;
  background-color: #000000;
}

#rocket-ship {
  position: relative;
  font-size: 100px;
}

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
    <main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">?
                        </div>
                    </div>
                </div>
            </section>
</main>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）