快捷導航

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

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

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

需求：實現(xiàn)訪問當前頁面直接滾動到最底部

方案：window對象的scrollTo()方法

API介紹：

參數(shù)接收一個點（文檔坐標），讓該點位于左上角。
可選參數(shù)為behavior(設(shè)置滾動的效果）

錯誤案例：

<!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>云想衣裳花想容，春風拂檻露華濃。

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

實際效果是并沒有發(fā)生滾動

正確的案例：

<!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>云想衣裳花想容，春風拂檻露華濃。

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