JavaScript中scrollTo()無(wú)效問(wèn)題處理辦法
需求： 實(shí)現(xiàn)訪問(wèn)當(dāng)前頁(yè)面直接滾動(dòng)到最底部
方案：window對(duì)象的scrollTo()方法
API介紹：
參數(shù)接收一個(gè)點(diǎn)（文檔坐標(biāo)），讓該點(diǎn)位于左上角。
可選參數(shù)為behavior(設(shè)置滾動(dòng)的效果）
錯(cuò)誤案例：
<!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>
div{
background-color: aquamarine;
width: 200px;
height: 2000px;
}
</style>
</head>
<body>
<div>nixx</div>
<span>云想衣裳花想容，春風(fēng)拂檻露華濃。
若非群玉山頭見(jiàn)，會(huì)向瑤臺(tái)月下逢。</span>
<script>
// 獲取文檔的高度和視口的高度
let docH = document.documentElement.offsetHeight,
viewH = window.innerHeight
// 滾動(dòng)到文檔底部
window.scrollTo(0,docH - viewH);
</script>
</body>
</html>
實(shí)際效果是并沒(méi)有發(fā)生滾動(dòng)
正確的案例：
<!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>
div{
background-color: aquamarine;
width: 200px;
height: 2000px;
}
</style>
</head>
<body>
<div>nixx</div>
<span>云想衣裳花想容，春風(fēng)拂檻露華濃。
若非群玉山頭見(jiàn)，會(huì)向瑤臺(tái)月下逢。</span>
<script>
// 獲取文檔的高度和視口的高度
let docH = document.documentElement.offsetHeight,
viewH = window.innerHeight
// 滾動(dòng)到文檔底部
setTimeout(()=>{
window.scrollTo(0,docH - viewH);
})
</script>
</body>
</html>
問(wèn)題分析記錄：
直接調(diào)用window.scrollTo方法，然后打斷點(diǎn)，你會(huì)發(fā)現(xiàn)已經(jīng)滾動(dòng)了
但是當(dāng)結(jié)束斷點(diǎn)，又回到了原來(lái)的位置
于是猜想著讓該方法異步調(diào)用，發(fā)現(xiàn)成功了
總結(jié)
到此這篇關(guān)于JavaScript中scrollTo()無(wú)效問(wèn)題處理辦法的文章就介紹到這了,更多相關(guān)js scrollTo()無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù),下面這篇文章主要給大家介紹了關(guān)于原生Ajax與JQuery?Ajax的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
對(duì) lightbox JS 圖片控件進(jìn)行了一下改造, 使其他支持復(fù)雜的圖片說(shuō)明
如果要為圖片添加詳細(xì)的圖片說(shuō)明，并為圖片的說(shuō)明設(shè)置一些格式，如字體的大小、顏色等，那么使用 title 這個(gè)屬性來(lái)設(shè)置這些說(shuō)明信息是沒(méi)辦法實(shí)現(xiàn)的。2010-03-03
利用js編寫(xiě)網(wǎng)頁(yè)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了利用js編寫(xiě)網(wǎng)頁(yè)進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
除Console.log()外更多的Javascript調(diào)試命令
本篇文章給大家介紹了除Console.log()外更多的Javascript調(diào)試命令，方便大家更多環(huán)境下的JS調(diào)試，學(xué)習(xí)下吧。2018-01-01
javascript 將共享屬性遷移到原型中去的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇javascript 將共享屬性遷移到原型中去的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要介紹了JS添加或刪除HTML dom元素的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)HTML DOM元素節(jié)點(diǎn)的創(chuàng)建、追加、刪除等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-03-03
微信小程序開(kāi)發(fā)實(shí)現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序開(kāi)發(fā)實(shí)現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
通過(guò)一次報(bào)錯(cuò)詳細(xì)談?wù)凱oint事件
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一次報(bào)錯(cuò)詳細(xì)談?wù)凱oint事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問(wèn)題的方法
這篇文章主要介紹了使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問(wèn)題的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家詳細(xì)介紹了JS查找英文文章中出現(xiàn)頻率最高的單詞，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03