如何获取浏览器滚动条的大小

发表于 JS 分类，标签:
06 09月 2019
0

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>获取浏览器滚动条的大小</title>

</head>

<body>

    <button onclick="getScrollBarSize()">获取滚动条的大小</button>

    <script>

        function countScrollBarSize() {

            var element = document.createElement('div');

            var elementStyle = element.style;

            elementStyle.position = 'absolute';

            elementStyle.top = '-9999em';

            elementStyle.left = '-9999em';

            // 无事件响应

            elementStyle.pointerEvents = 'none';

            // 隐藏div

            elementStyle.visibility = 'hidden';

            // 设置宽高

            elementStyle.width = '200px';

            elementStyle.height = '200px';

            // 强制出现滚动条

            elementStyle.overflow = 'scroll';

            // 添加到页面

            document.body.appendChild(element);

            var scrollBarSize = element.offsetWidth - element.clientWidth;

            document.body.removeChild(element);

            return scrollBarSize

        }

        function getScrollBarSize() {

            alert( ('滚动条的宽度：'+ countScrollBarSize() + 'px'))

        }

    </script>

</body>

</html>


效果展示


image.png


0 篇评论

发表我的评论