关于scrollTo滚动offsetTop到顶部的距离的bug找了两个小时

cv酱

已于 2022-07-21 16:37:44 修改

阅读量511

点赞数

文章标签： servlet javascript 前端

于 2022-07-20 12:50:24 首次发布

本文链接：https://blog.csdn.net/YingUser/article/details/125889515

版权

这篇博客介绍了如何通过JavaScript实现页面滚动到一定距离时显示右侧点击栏，并强调了ID正确放置的重要性。同时，针对Android设备的scrollTop兼容性问题，提供了相应的解决方案，确保底部栏在滚动时能正确显示。

摘要由CSDN通过智能技术生成

  这是滚动到一定的距离才显示右侧的点击栏
/**
     * 判断左侧定位栏是否展示
     */
    async checkIfShow() {
      window.addEventListener("scroll", () => {
        const scrollTop = document.getElementsByTagName("html")[0].scrollTop;
        if (scrollTop > 0) {
          this.anchorShow = true;
        } else {
          this.anchorShow = false;
        }
      });
    },
//这是点击之后跳转对应的板块   根据id来判断    


//切记不能放在子标签，把必须放在父级，不然会显示不了，点击都是同一个距离 

  // 右侧点击栏滚动
    getScrollTo(id) {
      let y = document.querySelector(`#${id}`).offsetTop;  
      window.scrollTo({
        top: y - 10,
        behavior: "smooth",
      });
    },


//下面是错误示范    id写在了子标签上

        <div class="content_wraper">
            <div class="content">
                <p class="flex_center zw_title" id="mingpan">您的八字命盘</p>
                <div>
                    <resultTable />
                </div>
                <div class="mg_box tx_box">
                    <p class="sub_title">八字命盘概述</p>
                    </div>
  </div>
</div>
//而正确的写法是要写在父级上


  <div class="content_wraper" id="mingpan">
            <div class="content">
                <p class="flex_center zw_title">您的八字命盘</p>
                <div>
                    <resultTable />
                </div>
                <div class="mg_box tx_box">
                   <p class="sub_title">八字命盘概述</p>
  </div>
</div>

2、关于scrollTop的iso和安卓的兼容问题，上面的添加在安卓机上是不起作用的，需要添加以下的代码，然后就有效果啦

document.body.scrollTop;

 // 底部栏是否显示
    isBtBarScroll() {
      window.addEventListener("scroll", () => {
        const scrollTop = document.getElementsByTagName("html")[0].scrollTop ||  document.body.scrollTop;
        if (scrollTop > 0) {
          this.isBtBarShow = true;
        } else {
          this.isBtBarShow = false;
        }
      });
    },