当屏幕分辨率大于或等于1200px时,我想显示“返回顶部”按钮。当然,这取决于窗口宽度。这是jQuery代码:
var wW = $(window).width() + 17;
console.log(wW);
if (wW >= 1200) {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#oc-ontop').fadeIn('fast');
} else {
$('#oc-ontop').fadeOut('fast');
}
});
}
因此,如果将窗口宽度设置为1200px,控制台会显示值1200.但1200是窗口宽度(1183px)+滚动条宽度(17px)的总和。 如何计算此函数中的滚动条宽度与其宽度无关?
答案 0 :(得分:1)
看一下这个主题:How can I get the browser's scrollbar sizes?
当您从那里应用代码时(最初Alexandre Gomes Blog):
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
你可以写:
var wW = $(window).width() + getScrollBarWidth();