js确定滚动元素和解决tab切换滚动位置独立

ゝ一纸荒年。 2023-10-04 19:11 7阅读 0赞

把以下代码复制粘贴到浏览器 Console 面板,敲一下回车：

function findscroller(element){
            element.onscroll=function () {
                console.log(element)
            }
            Array.from(element.children).forEach(findscroller)
      }
      findscroller(document.body)

复制到 Console 面板：

![f1a0d8c2998f4af985a444f08e6fbaa1.png][]

滑动你项目的内容,会看到以下的数据：

![e974e5f9bd1045e990f4d4a556e20839.png][]

此时你鼠标经过以上的数据会显示是你整个body

对于使用v-if动态渲染的元素，可能获取不到，只需要动态渲染完之后，再次执行代码即可：

![1d76872894f24f6ebee9b4bb468406dc.png][]  
  
解决这个问题的方法就是一下操作  
1.找到包裹数据的整个div,给他起一个class类名  
2.在style中给这个类名一个 height 和 overflow-y

1.  vh  
    vh是当前屏幕可见高度的1%，height:100vh == height:100%;  
    注意：当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开，其高度与屏幕高度一致。
2.  vw  
    vw就是当前屏幕宽度的1%  
    注意：设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况  
    **设置完成以后你会看到之前你body里面的数据会变成div**

[f1a0d8c2998f4af985a444f08e6fbaa1.png]: https://img-blog.csdnimg.cn/f1a0d8c2998f4af985a444f08e6fbaa1.png
[e974e5f9bd1045e990f4d4a556e20839.png]: https://img-blog.csdnimg.cn/e974e5f9bd1045e990f4d4a556e20839.png
[1d76872894f24f6ebee9b4bb468406dc.png]: https://img-blog.csdnimg.cn/1d76872894f24f6ebee9b4bb468406dc.png