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

    问题描述

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

    代码

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       * {
    10.         box-sizing: border-box;
    11.         margin: 0;
    12.         padding: 0;
    13.       }
    14.       .wrap {
    15.         width: 1000px;
    16.         margin: 0 auto;
    17.       }
    18.       .box1 {
    19.         height: 300px;
    20.         background: darkcyan;
    21.       }
    22.  
    23.       .box2 {
    24.         height: 587px;
    25.         background: cadetblue;
    26.       }
    27.  
    28.       .box3 {
    29.         height: 478px;
    30.         background: palevioletred;
    31.       }
    32.  
    33.       .box4 {
    34.         height: 287px;
    35.         background: darkmagenta;
    36.       }
    37.  
    38.       .box5 {
    39.         height: 671px;
    40.         background: darkorange;
    41.       }
    42.  
    43.       .box6 {
    44.         height: 354px;
    45.         background: pink;
    46.       }
    47.  
    48.       .toolbar {
    49.         display: flex;
    50.         width: 80px;
    51.         background: darkgoldenrod;
    52.         position: fixed;
    53.         flex-direction: column;
    54.         right: 10px;
    55.         top: 100px;
    56.       }
    57.  
    58.       .toolbar .item {
    59.         height: 80px;
    60.         display: flex;
    61.         align-items: center;
    62.         justify-content: center;
    63.       }
    64.  
    65.       .toolbar .active {
    66.         background: darkkhaki;
    67.         color: #fff;
    68.       }
    69.     style>
    70.   head>
    71.   <body>
    72.     <div class="toolbar">
    73.       <div class="item" data-index="0">1div>
    74.       <div class="item" data-index="1">2div>
    75.       <div class="item" data-index="2">3div>
    76.       <div class="item" data-index="3">4div>
    77.       <div class="item" data-index="4">5div>
    78.       <div class="item" data-index="5">6div>
    79.     div>
    80.     <div class="wrap">
    81.       <p>内容p>
    82.       <p>内容p>
    83.       <p>内容p>
    84.       <p>内容p>
    85.       <p>内容p>
    86.       <p>内容p>
    87.       <p>内容p>
    88.       <p>内容p>
    89.       <p>内容p>
    90.       <p>内容p>
    91.       <div class="box box1">1div>
    92.       <div class="box box2">2div>
    93.       <div class="box box3">3div>
    94.       <div class="box box4">4div>
    95.       <div class="box box5">5div>
    96.       <div class="box box6">6div>
    97.       <p>内容p>
    98.       <p>内容p>
    99.       <p>内容p>
    100.       <p>内容p>
    101.       <p>内容p>
    102.       <p>内容p>
    103.       <p>内容p>
    104.       <p>内容p>
    105.       <p>内容p>
    106.       <p>内容p>
    107.       <p>内容p>
    108.       <p>内容p>
    109.       <p>内容p>
    110.       <p>内容p>
    111.       <p>内容p>
    112.       <p>内容p>
    113.       <p>内容p>
    114.       <p>内容p>
    115.       <p>内容p>
    116.       <p>内容p>
    117.       <p>内容p>
    118.       <p>内容p>
    119.       <p>内容p>
    120.       <p>内容p>
    121.       <p>内容p>
    122.       <p>内容p>
    123.       <p>内容p>
    124.       <p>内容p>
    125.       <p>内容p>
    126.       <p>内容p>
    127.       <p>内容p>
    128.       <p>内容p>
    129.     div>
    130.     <script>
    131.       let boxList = document.querySelectorAll(".box");
    132.       let itemList = document.querySelectorAll(".item");
    133.       let heights = []; //所有的box距离顶部的高度
    134.       boxList.forEach(function (box) {
    135.         heights.push(box.offsetTop);
    136.       });
    137.       console.log(heights);
    138.       window.onscroll = function () {
    139.         let _active = document.querySelector(".active");
    140.         if (_active) {
    141.           _active.classList.remove("active");
    142.         }
    143.         let _scrollTop = parseInt(document.documentElement.scrollTop);
    144.         // console.log("_scrollTop", _scrollTop);
    145.         for (let i = heights.length - 1; i >= 0; i--) {
    146.           if (_scrollTop >= heights[i]) {
    147.             itemList[i].classList.add("active");
    148.             break;
    149.           }
    150.         }
    151.       };
    152.       let _toolbar = document.querySelector(".toolbar");
    153.       _toolbar.onclick = function (e) {
    154.         if (e.target.className === "item") {
    155.           let index = e.target.dataset.index;
    156.           console.log(index);
    157.           document.documentElement.scrollTop = heights[index];
    158.         }
    159.       };
    160.     script>
    161.   body>
    162. html>

    解决办法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 相关阅读:
    山海鲸可视化B/S架构应用
    商业合作保密协议 (4)
    黑客（网络安全）技术速成自学
    java线程池大小_线程池大小设置多少合适？
    Postgresql RECORD与%ROWTYPE类型
    BurpSuite安装
    web前端-javascript-立即执行函数(说明、例子)
    一文读懂Llama 2（从原理到实战）
    Bootstrap Blazor 组件库 Row 布局组件（栅格系统）
    数学术语之源——群同态的“核(kernel)”
  • 原文地址：https://blog.csdn.net/qq_45547094/article/details/126581749