快捷導(dǎo)航

JavaScript中scrollTo()無效問題處理辦法

更新時(shí)間：2024年01月24日 15:33:59 作者：Kratial

這篇文章主要給大家介紹了關(guān)于JavaScript中scrollTo()無效問題處理辦法,scrollTo()方法將文檔滾動(dòng)到指定的坐標(biāo),如需使 scrollTo()方法起作用,文檔必須大于屏幕,并且滾動(dòng)條必須可見,需要的朋友可以參考下

需求：實(shí)現(xiàn)訪問當(dāng)前頁面直接滾動(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)拂檻露華濃。

        若非群玉山頭見，會(huì)向瑤臺(tái)月下逢。</span>
    <script>
        // 獲取文檔的高度和視口的高度
        let docH = document.documentElement.offsetHeight,
        viewH = window.innerHeight
        // 滾動(dòng)到文檔底部
        window.scrollTo(0,docH - viewH);
    </script>
</body>
</html>

實(shí)際效果是并沒有發(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)拂檻露華濃。

        若非群玉山頭見，會(huì)向瑤臺(tái)月下逢。</span>
    <script>
        // 獲取文檔的高度和視口的高度
        let docH = document.documentElement.offsetHeight,
        viewH = window.innerHeight
        // 滾動(dòng)到文檔底部
        setTimeout(()=>{
            window.scrollTo(0,docH - viewH);
        })
    </script>
</body>
</html>