Maison > Article > interface Web > Comment obtenir la largeur de la barre de défilement en js (exemple de code)

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

不言original: 2018-08-11 15:49:003038parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles sont les méthodes pour réaliser la déduplication de tableau en js ? Une brève introduction à la méthode de déduplication de tableau jsArticle suivant：Quelles sont les méthodes pour réaliser la déduplication de tableau en js ? Une brève introduction à la méthode de déduplication de tableau js

Articles Liés

Voir plus