So erhalten Sie die Breite der Bildlaufleiste in js (Codebeispiel)-js-Tutorial-php.cn

So erhalten Sie die Breite der Bildlaufleiste in js (Codebeispiel)

不言

Freigeben： 2018-08-11 15:49:00

Original

3032 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Ermitteln der Bildlaufleistenbreite in js (Codebeispiel). Ich hoffe, dass er für Sie hilfreich ist.

Idee: Legen Sie beim Erstellen eines Elements keinen Rahmen für das Element fest, legen Sie dann overflowY:scroll für das Element fest und berechnen Sie dann die Breite der Bildlaufleiste basierend auf offsetWidth-clientWidth des Elements.

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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Was sind die Implementierungsmethoden der JS-Modularisierung? Erklärung der JS-Modularität

Wie schreibe ich CSS-Animationen in JS? So schreiben Sie CSS-Animationen in js (Code)

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die Breite der Bildlaufleiste in js (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!