iba*_*s88 8 css jquery scrollbar modernizr browser-feature-detection
使用响应式布局和大量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;`
正如David Walsh 所解释的那样.滚动条宽度/高度为零:
OSX(除非鼠标设置已被修改,或在Lion之前).
触摸设备浏览器(Android,iOS,Windows Phone).
平板电脑模式下的IE12 Edge(动态可更改,滚动条显示和隐藏,并在平板电脑模式更改时重新页面重绘.我认为通过注册调整大小事件和测试滚动条宽度可以检测到更改).
可以通过CSS更改,::-webkit-scrollbar { width: 1em; }例如-ms-overflow-style: none(文档).
如果元素不在文档中,则可能为零(也可能是脚本在运行<head>？).
其他说明:
Modernizr有一个hiddenscrollbar功能检测,可检测是否使用零宽度滚动条.
高度差也应该测量这个,但它在IE8中不可靠(特别是由于变焦变化后调整大小事件后不可靠),所以我总是使用宽度差异.
如果宽度不为零,它也会因以下情况而改变:(1)页面缩放更改(宽度与某些浏览器上的物理像素保持一致,因此逻辑像素会发生变化.虽然捏缩放的行为不同),但(2)样式更改喜欢-webkit-scrollbar,(3)桌面主题更改(主要主题的宽度不同,或个性化主题).
以下是测试人员的一些链接:
一些简单的纯JavaScript代码(可能更好地使div永久化以避免reflow calcs).
Modernizr牛测试,如果scrollbarwidth为零,AFAIK会将hiddenscrollbar设为true(另请参阅cssscrollbar).
| 归档时间： |
|
| 查看次数： |
3091 次 |
| 最近记录： |