• js利用offsetWidth和clientWidth来计算滚动条的宽度


    原文: http://www.haorooms.com/post/js_scroll_width

    参考: https://www.cnblogs.com/benxiaohai-microcosm/p/7814825.html

    -------------------------------------------------------------------------------------

    大家好,十一小长假结束了。。相信大家玩的都很开心,还没有尽兴!好多网友期盼祖国母亲再过一次农历生日呢!!!哈哈哈哈!言归正传,今天我主要介绍一个计算滚动条宽度的例子。

    前言

    其实,很多情况下滚动条宽度是不用计算的,特别是谷歌浏览器,可以对滚动条进行美化,具体请看http://www.haorooms.com/post/CSS_selections 这里例子,已经定义了滚动条的宽度是9px加上padding-left的一个像素,所以滚动条的宽度应该是10px,但是,这样计算出来有浏览器兼容问题,你的IE浏览器的滚动条宽度不一定是10px,今天,我用offsetWidth和clientWidth来计算一下滚动条的宽度。

    占位方式

    在PC浏览器中,滚动条是占位元素的内边距和内容区域的;而在移动浏览器中,滚动条是不占用内边距和内容区域,并且还及时显隐。因此,只需要在在PC浏览器中计算滚动条的宽度,尤其是在全屏弹窗不可滚动的情况中。

    offsetWidth-clientWidth方法

    说到offsetWidth和clientWidth,不少朋友迷茫了,这个宽度是什么意思呢?http://www.haorooms.com/post/js_jquery_height 这篇文章洪有关javascript的各种高度,介绍了offsetWidth和clientWidth等等的意思,大家可以看看!!

    function getScrollbarWidth() {
        var oP = document.createElement('p'),
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'
            }, i, scrollbarWidth;
        for (i in styles) oP.style[i] = styles[i];
        document.body.appendChild(oP);
        scrollbarWidth = oP.offsetWidth - oP.clientWidth;
        oP.remove();
        return scrollbarWidth;
    }

    使用

    console.dir(getScrollbarWidth());

    就可以输出滚动条的宽度了,大家可以试一试啊!

    clientWidth-clientWidth方法

    这个方法和上面的方法差不多!

    function getScrollbarWidth() {
        var oP = document.createElement('p'),
            styles = {
                width: '100px',
                height: '100px'
            }, i, clientWidth1, clientWidth2, scrollbarWidth;
        for (i in styles) oP.style[i] = styles[i];
        document.body.appendChild(oP);
        clientWidth1 = oP.clientWidth;
        oP.style.overflowY = 'scroll';
        clientWidth2 = oP.clientWidth;
        scrollbarWidth = clientWidth1 - clientWidth2;
        oP.remove();
        return scrollbarWidth;
    }

    使用方法一样!

    console.dir(getScrollbarWidth());

    只是介绍了一个计算滚动条的方法,大家在用到的时候可以参考一下,希望对您有帮助!

    PREVIOUS:

     

  • 相关阅读:
    day-14 模块的使用,循环导入,模块导入路径优先级,项目的目录结构
    day13-三元表达式,生成式,递归函数,匿名函数
    day12-无参装饰器,迭代器和生成器
    day11-函数对象,函数嵌套,名称空间与作用域,闭包函数,以及装饰器的前言
    一周总结(4)
    大道至简读后感
    一周总结(3)
    一周总结(2)
    一周总结(1)
    关于教室派app的使用体验与建议
  • 原文地址:https://www.cnblogs.com/oxspirt/p/8893610.html
Copyright © 2020-2023  润新知