JavaScript - 封装一个页面自左向右滚动的方法

Posted 2021-06-17 WHOVENLY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript - 封装一个页面自左向右滚动的方法相关的知识，希望对你有一定的参考价值。

这几日遇到一个需求，需要在用户进入页面之后，直接触发一个页面自左向右移动再返回到左侧的一个动画，这篇文章就记录一下大致思路。

html代码：
需要一个父级盒子collect_page用于设置滚动，再来一个子级盒子用于放置需要展示的内容。

  <body>
    <div class="collect_page">
      <div class="box"></div>
    </div>
  </body>

css代码：

/* 清除默认样式 */
* {
  padding: 0;
  margin: 0;
}
/* 设置滚动 */
.collect_page {
  overflow: scroll;
}
/* 为了更加美观，去除滚动条 */
::-webkit-scrollbar {
  height: 0;
  display: none !important;
}
/* 内容展示，因为想要滚动效果更加直观，我这里使用了图片 */
.box {
  width: 1920px;
  height: 100vh;
  background: url("./img/bg.jpg") no-repeat;
  background-size: 1920px 100%;
}

js代码：

function show_toggle_scroll() {
  return new Promise((resolve, reject) => {
    //给他一层遮罩，让其在动画播放时不能对页面进行操作
    let mask = document.createElement("div");
    let style = {
      position: "fixed",
      left: "0",
      right: "0",
      top: "0",
      bottom: "0",
      zIndex: "999999",
    };
    Object.keys(style).map((key) => {
      mask.style[key] = style[key];
    });
    document.body.appendChild(mask);
    let status = 0;
    let offset = 0;
    let width =
      document.querySelector(".collect_page").scrollWidth - window.screen.width;
    document.querySelector(".collect_page").scrollLeft = 0;
    let step = 4;
    function scroll() {
      document.querySelector(".collect_page").scrollLeft = offset;
      if (status == 0) {
        offset += step;
        offset <= width && window.requestAnimationFrame(scroll);
        offset >= width && status++;
      }
      if (status == 1) {
        offset -= step;
        offset >= 0 && window.requestAnimationFrame(scroll);
        offset <= 0 && status++;
      }
      if (status == 2) {
        resolve("finish");
        window.isScroll = false;
        document.body.removeChild(mask);
      }
    }
    window.requestAnimationFrame(scroll);
  });
}
show_toggle_scroll();

以上是关于JavaScript - 封装一个页面自左向右滚动的方法的主要内容，如果未能解决你的问题，请参考以下文章