Comment obtenir la largeur de la barre de défilement en js (exemple de code)-js tutoriel-php.cn

Comment obtenir la largeur de la barre de défilement en js (exemple de code)

不言

Libérer： 2018-08-11 15:49:00

original

3054 Les gens l'ont consulté

Le contenu de cet article explique comment obtenir la largeur de la barre de défilement en js (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Idée : En créant un élément, ne définissez pas de bordure pour l'élément, puis définissez overflowY:scroll pour l'élément, puis calculez la largeur de la barre de défilement en fonction de la offsetWidth-clientWidth de l'élément.

Code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算滚动条宽度</title>
</head>

<body>
    <script>
        // 封装获取滚动条宽度的方法
        function getScrollBarWidth() {
            var el = document.createElement("p"),
                styles = {
                    width: "100px",
                    height: "100px",
                    overflowY: "scroll"
                },
                i;

            // 这里很巧妙呀，先定义了一个styles对象，里面写了各种样式值，然后通过for in将这个对象的值赋给p元素的style对象
            // 而不用通过style.width=***等来给p的样式对象赋值。
            for (i in styles) {
                el.style[i] = styles[i];
            }

            // 将元素加到body里面
            document.body.appendChild(el);

            var scrollBarWidth = el.offsetWidth - el.clientWidth;
            //将添加的元素删除
            el.remove();
            return scrollBarWidth;
        }

        console.log(getScrollBarWidth()); // 注意这里imac得到的结果为0，因为imac的滚动条是没有宽度的。
    </script>
</body>

</html>

Copier après la connexion

Recommandations associées :

Quelles sont les méthodes d'implémentation de la modularité JS ? Explication de la modularité js

Comment écrire une animation css en js ? Comment écrire une animation CSS en js (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!