如何使用JavaScript获取滚动条宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (80)

下面的HTML将在div.容器的右侧边缘显示一个滚动条。

可以确定滚动条的宽度吗?

<div class="container" style="overflow-y:auto; height:40px;">
  <div class="somethingBig"></div>
</div>
提问于
用户回答回答于

这个函数应该给你滚动条的宽度。

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

这里的基本步骤是:

  1. 创建隐藏的div(外部),宽度设置为‘100 px’,并获得偏移宽度(应该是100)
  2. 使用CSS溢出属性强制滚动条显示在div(外部)中
  3. 创建新的div(内部)并附加到外部,将其宽度设置为“100%”并获得偏移宽度
  4. 基于集合偏移量计算滚动条宽度

热门问答

linux如何限制单一ip对服务器的日访问量?

小爱同学

腾讯云 · 技术支持 (已认证)

推荐
您根据当前网站规模和业务了解下【网站管家 WAF】,企业站点可有效抵御恶意攻击,垃圾访问。 图片.png 您反馈网站短信验证码被盗刷,也可结合自己业务,可自行部署iptables进行手动拦截。或其他方式 例如您的网站是nginx,在web配置文件中开启配置HttpLimitR...... 展开详请

兼容性测试只能上传apk测试的吗?

WeTest质量开放平台团队专注游戏,提升品质
推荐

目前不支持公众号的兼容测试,还请知晓

关于群自动解散的问题?

安稳

腾讯科技 · 工单技术支持 (已认证)

推荐
您好,临时群是没有的。云通信的群组只有私有群(Private)、公开群(Public)、聊天室(ChatRoom)、音视频聊天室(AVChatRoom)和在线成员广播大群(BChatRoom)这五种。 您说的这个需求,思路:创建群组时,服务端记录一下时间,到达约定解散的时间以后,...... 展开详请

腾讯云短信接收方对控制台发出的短信做出回应,比如说回复短信“你好”,控制台是否能收到回复的内容?

您好,国内短信可在 短信控制台->国内短信->统计分析->短信记录->回复记录 查看用户回复的短信。 同时可配置文本短信回复回调,配置后会推送相关回复到用户服务器。 统计分析:https://cloud.tencent.com/document/product/382/18062...... 展开详请

不同账号的三台服务器用内网ping不通?

不同账号的服务器本来就已经独立划分,内网肯定是不通的,公网各自都有自己的公网,通是一定的,具体不同账号内网不通你可以参考私有网络VPC的定义。同地域不同账户的不同 VPC 相互隔离,但可以通过建立 同账户同地域对等连接同账户跨地域对等连接 实现内网互联。

对象存储单个文件大于5GB不能改变存储类型为归档存储,那么我上传的时候可以直接指定为归档存储吗?

Lew

腾讯云对象存储 · 工程师 (已认证)

推荐已采纳

可以的,coscmd upload a.txt a.txt -H "{'x-cos-storage-class':'Archive'}" -H 参数可以添加自定义的header

所属标签

扫码关注云+社区