vue頁面設(shè)置滾動失敗的解決方案(scrollTop一直為0)
背景
希望頁面能跳轉(zhuǎn)到 某一位置用到了scrollTop屬性?？墒前l(fā)現(xiàn)給某個div設(shè)置該屬性后，一致為0。找了很多方案，但不都適合自己，或者說不知道是否適合。
怎么看我這個方法適不適合你
你可以嘗試打印滾動條的位置,頁面滾動后,再次打印滾動條的位置,如果一直為0的話,那我的的這個方法就可以解決你遇到的問題(說明你可能一直在打印窗口的滾動,而不是你真正需要控制滾動的那個元素).
誤區(qū):
并不是一股腦設(shè)置window.scrollTop就可以讓頁面滾動的
scrollTop可以用來設(shè)置滾動條位置,但是你得找對元素,在路由嵌套的vue頁面中,window可能始終是沒有滾動的,而你頁面上顯示的滾動條也只是頁面中的元素的滾動條.
什么時候存在滾動條？
頁面布局我們可以簡單理解為 div盒子套div盒子。當(dāng)內(nèi)層div盒子的高度大于外部時，外部的div就會出現(xiàn)滾動條。此時外部的div才具備scrollTop屬性，否則你無論如何設(shè)置都為0. 這里隱藏了一些條件：
外部的div一定有高度，否則外部div將和內(nèi)部div高度一致，不滿足大于條件，所以不會出現(xiàn)滾動條。 外部div的 overflow：auto。hidden的情況下超出的部分被隱藏，無法出現(xiàn)滾動條。 如果想設(shè)置滾動條屬性，一定要知道滾動條是哪個div產(chǎn)生的。
Why scrollTop==0?
總而言之，所有情況都是因為你給一個沒有滾動條的元素設(shè)置滾動條的位置。
這就涉及到一個知識點的誤區(qū): "讓頁面滾動到指定位置這個需求,不一定是讓整個window滾動,在路由嵌套的vue頁面中,window可能始終是沒有滾動的,產(chǎn)生滾動條的是一個設(shè)置了固定高度,且子元素的高度超出了他本身的元素. 這時候,元素才會產(chǎn)生滾動條,而你一股腦的給window設(shè)置滾動條位置,window也蒙了"
如何判斷頁面的滾動條是哪個div產(chǎn)生的？
滾動滾輪,看是哪一塊元素在滾動(具體到div上).設(shè)置他的父元素的滾動條位置即可讓其滾動.
場景1：如何刪除body的滾動條，保留某個div的滾動條
body{overflow:hidden;}
div{
height:xxpx; #小于子元素的高度
overflow-y:auto;
}場景2：documentElement.scrollTop或者document.body.scrollTop 一直為0的情況
產(chǎn)生根本原因還是因為給沒有scrollTop的元素設(shè)定了該值，直接原因是因為瀏覽器兼容問題。
document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset場景三:去掉元素的滾動條,保留滾動功能
我的這篇博客中有寫:文章來源：http://www.zghlxwxcb.cn/news/detail-442991.html
去掉滾動條,保留滾動功能https://blog.csdn.net/weixin_64530670/article/details/132162424文章來源地址http://www.zghlxwxcb.cn/news/detail-442991.html
到了這里，關(guān)于vue頁面設(shè)置滾動失敗的解決方案(scrollTop一直為0)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
