js实现手机端导航点击自动滚动下一个到可视范围

最新推荐文章于 2023-07-03 16:02:43 发布

心想事成--

最新推荐文章于 2023-07-03 16:02:43 发布

阅读量357

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/zcy1005/article/details/124281807

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>导航</title>
    <style>
      *{
        margin: 0;
        padding: 0;
                list-style: none;
      }
      ul {
        width: 100%;
        height: 55px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
      }
      ul > li {
                padding: 0 20px;
        height: 55px;
        display: inline-block;
        cursor: pointer;
        color: #222222;
        font-size: 18px;
        text-align: center;
        line-height: 55px;
      }
            li.active{
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #222222;
                position: relative;
            }
            li.active::before{
                width: 24px;
                height: 4px;
                background: #31C27C;
                border-radius: 2px;
                content: "";
                position: absolute;
                left: 0;
                bottom: 2px;
                right: 0;
                margin: auto;
            }
            ::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
    </style>
  </head>
  <body>
    <ul class="max">
      <li class="active">关注</li>
      <li>热门推荐</li>
      <li>热销榜</li>
      <li>最新文章</li>
      <li>免费文章</li>
      <li>问答</li>
      <li>娱乐</li>
    </ul>
    <script>
      var timer = null,
                    parentElement = document.querySelector(".max"),
                    childElement = document.querySelectorAll("li");
      for (var i = 0, len = childElement.length; i < len; i++) {
        childElement[i].index = i;
        childElement[i].onclick = function() {
                    // 这一步for循环是为了样式区分去除兄弟元素已有的class
                    for (var j = 0, len = childElement.length; j < len; j++) {
                        childElement[j].className = ''
                    }
                    // end
                    childElement[this.index].className = 'active';
          var offsetLeft = childElement[this.index].offsetLeft, // 当前点击li距离左边距离
                            scrollX = parentElement.scrollLeft, // 当前ul滚动距离左边距离
                            clientX = parentElement.clientWidth, // ul宽度
                            childClientX = childElement[this.index].clientWidth; // 当前点击li宽度
          var speed = offsetLeft - scrollX + childClientX / 2 - clientX / 2,
                            s = speed / 40,
                            totalX = speed + scrollX;
                    // setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
                    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>

心想事成--

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js实现手机端导航点击自动滚动下一个到可视范围

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>导航</tit.
复制链接

扫一扫