原生js完成手机端导航滑动结果

2019年8月20日 148次阅读 来源: 夕水

代码以下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>导航结果</title>
    <style>
      div,
      li,
      ul,
      a {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      ul {
        width: 500px;
        height: 35px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        border-bottom: 1px solid #dd3;
      }
      ul > li {
        width: 60px;
        height: 35px;
        display: inline-block;
        cursor: pointer;
        color: #8d19f3;
        font-size: 18px;
        text-align: center;
        line-height: 35px;
      }
      ul > li:not(:first-child) {
        margin-left: 25px;
      }
      ::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    </style>
  </head>
  <body>
    <ul class="box">
      <li>导航一</li>
      <li>导航二</li>
      <li>导航三</li>
      <li>导航四</li>
      <li>导航五</li>
      <li>导航六</li>
      <li>导航七</li>
      <li>导航八</li>
      <li>导航九</li>
      <li>导航十</li>
      <li>导航十一</li>
      <li>导航十二</li>
      <li>导航十三</li>
      <li>导航十四</li>
      <li>导航十五</li>
      <li>导航十六</li>
    </ul>
    <script>
      var timer = null,
        parentElement = document.querySelector(".box"),
        childElement = document.querySelectorAll("li");
      for (var i = 0, len = childElement.length; i < len; i++) {
        childElement[i].index = i;
        childElement[i].onclick = function() {
          var offsetLeft = childElement[this.index].offsetLeft,
            scrollX = parentElement.scrollLeft,
            clientX = parentElement.clientWidth,
            childClientX = childElement[this.index].clientWidth;
          var speed = offsetLeft - scrollX + childClientX / 2 - clientX / 2,
            s = speed / 40,
            totalX = speed + scrollX;
          timer = setInterval(function() {
            parentElement.scrollLeft += s;
            if (
              parentElement.scrollLeft <= 0 ||
              parentElement.scrollLeft >= parentElement.scrollWidth - clientX ||
              (speed > 0 && parentElement.scrollLeft > totalX) ||
              (speed < 0 && parentElement.scrollLeft < totalX)
            ) {
              clearInterval(timer);
            }
          }, 10);
        };
      }
    </script>
  </body>
</html>

结果如图所示:

《原生js完成手机端导航滑动结果》

鄙人创建了一个QQ群，供人人进修交换，愿望和人人合作愉快，互相帮助，交换进修，以下为群二维码：

《原生js完成手机端导航滑动结果》

    原文作者：夕水
    原文地址: https://segmentfault.com/a/1190000017072703
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞