js楼层导航点击跳转偶尔不生效bug

object not found

已于 2022-08-29 12:07:24 修改

阅读量1.9w

点赞数 1

分类专栏：爬坑之旅 javascript 文章标签： javascript bug

于 2022-08-29 11:41:28 首次发布

本文链接：https://blog.csdn.net/qq_45547094/article/details/126581749

版权

javascript 同时被 2 个专栏收录

51 篇文章 1 订阅

订阅专栏

爬坑之旅

16 篇文章 0 订阅

订阅专栏

问题描述

根据元素距离顶部距离的数组进行判断要跳转的位置，有时候会出现跳转不生效的原因

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .wrap {
        width: 1000px;
        margin: 0 auto;
      }
      .box1 {
        height: 300px;
        background: darkcyan;
      }

      .box2 {
        height: 587px;
        background: cadetblue;
      }

      .box3 {
        height: 478px;
        background: palevioletred;
      }

      .box4 {
        height: 287px;
        background: darkmagenta;
      }

      .box5 {
        height: 671px;
        background: darkorange;
      }

      .box6 {
        height: 354px;
        background: pink;
      }

      .toolbar {
        display: flex;
        width: 80px;
        background: darkgoldenrod;
        position: fixed;
        flex-direction: column;
        right: 10px;
        top: 100px;
      }

      .toolbar .item {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .toolbar .active {
        background: darkkhaki;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="toolbar">
      <div class="item" data-index="0">1</div>
      <div class="item" data-index="1">2</div>
      <div class="item" data-index="2">3</div>
      <div class="item" data-index="3">4</div>
      <div class="item" data-index="4">5</div>
      <div class="item" data-index="5">6</div>
    </div>
    <div class="wrap">
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <div class="box box1">1</div>
      <div class="box box2">2</div>
      <div class="box box3">3</div>
      <div class="box box4">4</div>
      <div class="box box5">5</div>
      <div class="box box6">6</div>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>
    </div>
    <script>
      let boxList = document.querySelectorAll(".box");
      let itemList = document.querySelectorAll(".item");
      let heights = []; //所有的box距离顶部的高度
      boxList.forEach(function (box) {
        heights.push(box.offsetTop);
      });
      console.log(heights);
      window.onscroll = function () {
        let _active = document.querySelector(".active");
        if (_active) {
          _active.classList.remove("active");
        }
        let _scrollTop = parseInt(document.documentElement.scrollTop);
        // console.log("_scrollTop", _scrollTop);
        for (let i = heights.length - 1; i >= 0; i--) {
          if (_scrollTop >= heights[i]) {
            itemList[i].classList.add("active");
            break;
          }
        }
      };
      let _toolbar = document.querySelector(".toolbar");
      _toolbar.onclick = function (e) {
        if (e.target.className === "item") {
          let index = e.target.dataset.index;
          console.log(index);
          document.documentElement.scrollTop = heights[index];
        }
      };
    </script>
  </body>
</html>

解决办法

具体原因是这一行代码判断问题，应该是dpi缩放导致的

 if (_scrollTop >= heights[i]) {
            itemList[i].classList.add("active");
            break;
          }

可以通过将元素距离顶部的距离的数组加1，让其肯定大于，从而解决偶尔不触发的问题

 _toolbar.onclick = function (e) {
        if (e.target.className === "item") {
          let index = e.target.dataset.index;
          console.log(index);
          document.documentElement.scrollTop = heights[index] + 1;//关键代码
        }
      };

csdn文章推荐受影响解决办法10个字10行

object not found

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js楼层导航点击跳转偶尔不生效bug

可以通过将元素距离顶部的距离的数组加1，让其肯定大于，从而解决偶尔不触发的问题。根据元素距离顶部距离的数组进行判断要跳转的位置，有时候会出现跳转不生效的原因。具体原因是这一行代码判断问题。......
复制链接

扫一扫