jquery – 检测不同类型的滚动条(例如,正常/隐藏的osx)

使用响应式布局和大量CSS来创建网页,我遇到了隐藏或显示滚动条并将布局更改为17px的问题.

主要问题是在OSX上滚动条悬停在整个布局上而不影响它,但在Windows上的任何浏览器中,例如滚动条是布局的一部分,因此将其移动到左侧宽度为17px.

为了解决这个问题,我开始检测以下浏览器：

if($.browser.chrome) {
   // adapt layout by 17px
} else if ($.browser.mozilla) {
   // adapt layout by 17px
}  else if ($.browser.safari) {
   // dont adapt layout by 17px
}

但在阅读了很多关于该主题的帖子之后,我意识到不是检测浏览器,而是许多人建议使用功能检测.
那么有没有办法找出浏览器如何处理滚动条？他们是否会成为页面布局的一部分,或者他们只会徘徊在safari中的所有内容之上？

谢谢你的帮助！

解决方法

这很容易衡量.在可滚动元素上,滚动条粗细仅为：

var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth;`

作为大卫沃尔什的explained very well.滚动条宽度/高度为零：

> OSX(除非鼠标设置已被修改,或在Lion之前).
>触摸设备浏览器(Android,iOS,Windows Phone).
>平板电脑模式下的IE12 Edge(动态可更改,当平板电脑模式更改时,滚动条显示和隐藏以及页面重绘.我认为通过注册调整大小事件和测试滚动条宽度可以检测到更改).
>可以通过CSS更改,例如:: – webkit-scrollbar {width：1em;例如-ms-overflow-style：none(documentation).
>如果元素不在文档中,则可能为零(也可能是在< head>？中运行脚本).

其他说明：

> Modernizr有一个hiddenscrollbar功能检测,可检测是否使用零宽度滚动条.
>高度差也应该测量这个,但它在IE8中不可靠(特别是由于变焦变化后调整大小事件后不可靠),所以我总是使用宽度差异.
>如果宽度不为零,它也会因以下情况而改变：(1)页面缩放更改(宽度与某些浏览器上的物理像素保持一致,因此逻辑像素会发生变化.虽然捏缩放的行为不同),但(2)样式更改如-webkit-scrollbar,(3)桌面主题更改(主要主题的宽度不同,或个性化主题).

以下是测试人员的一些链接：

>一些简单的plain JavaScript code(可能更好地使div永久化以避免回流计算).
> Modernizr cow test如果scrollbarwidth为零,AFAIK会将hiddenscrollbar设为true(另请参阅cssscrollbar).
>一些ugly jQuery code