suchen

Heim >Web-Frontend >js-Tutorial >So erhalten Sie die Breite der Bildlaufleiste in js (Codebeispiel)

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

不言
不言Original
2018-08-11 15:49:003103Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welche Methoden gibt es, um die Array-Deduplizierung in js zu implementieren? Eine kurze Einführung in die JS-Array-DeduplizierungsmethodeNächster Artikel：Welche Methoden gibt es, um die Array-Deduplizierung in js zu implementieren? Eine kurze Einführung in die JS-Array-Deduplizierungsmethode

In Verbindung stehende Artikel

Mehr sehen