我的问题是,通过例如
我能否为不存在的滚动条创建一个占位符,这样它就不会“跳”回来了?
或者是否可能将其“禁用”并使其变为“灰色”?
我在搜索中找不到任何解决方案。我在这里找到了类似的东西:stackoverflow.com,其中滚动条始终存在。但不同之处在于,即使页面比窗口更长,滚动条也必须保持禁用状态。它只能通过我控制的另一个脚本再次“打开”。
这种可能性存在吗?
谢谢。
而且对于“身体”有了一点点更明智的认识。
不再“跳来跳去”了。太美味了。
效果现在完全运行,你几乎察觉不到滚动条的变化,每个细节都很合适。Cwolve的脚本完美无缺,并进行了精确计算:
非常感谢。这个真不错。
overflow:hidden;
移除的浏览器窗口垂直滚动条,在稍后重新出现时会导致页面跳动。我使用jQuery在脚本运行并滚动页面到特定位置时,从访问者那里移除滚动选项,然后再让它重新出现。我能否为不存在的滚动条创建一个占位符,这样它就不会“跳”回来了?
或者是否可能将其“禁用”并使其变为“灰色”?
我在搜索中找不到任何解决方案。我在这里找到了类似的东西:stackoverflow.com,其中滚动条始终存在。但不同之处在于,即使页面比窗口更长,滚动条也必须保持禁用状态。它只能通过我控制的另一个脚本再次“打开”。
这种可能性存在吗?
谢谢。
更新:
是时候进行一次状态更新了。
我在星云背景图上遇到了一些问题,它被设置在body
标签上。
当jQuery脚本(来自cwolves的答案)向html
标签添加了填充,并且应该将页面上的所有元素推到左侧时,背景图仍然无法正确显示。
嗯,我发现body
元素不像其他div
元素那样反应灵敏。它不仅仅是html
标签内的一个“块”,而是有着自己的行为方式,显然不能以同样的方式欺骗它。因此,当背景图设置在body
上时,它是无法触及的。
但是我花了一些时间才意识到这一点...
解决这个问题的最终方法如此简单,以至于我几乎要哭出来,想到了无尽的(可能有点夸张)研究body
的小时数。
我只需将所有内容包裹在一个<div id="body">
中,并给它设置背景图。突然间,一切都顺利解决了。
来自:
<body>
...
</body>
和
body {background-image: url(...);}
致:
<body>
<div id="body">
...
</div>
</body>
而且:
#body {background-image: url(...);}
而且对于“身体”有了一点点更明智的认识。
不再“跳来跳去”了。太美味了。
效果现在完全运行,你几乎察觉不到滚动条的变化,每个细节都很合适。Cwolve的脚本完美无缺,并进行了精确计算:
function getScrollBarWidth(){
var div = $('<div><div>' + new Array(100).join('content<br />') + '</div></div>'),
div2 = div.find('div'),
body = $(document.body);
div.css({ overflow : 'hidden', width: 100, height: 100, position : 'absolute', left : -1000, top : -1000 });
body.append(div);
var width1 = div2.width();
div.css({ overflow : 'auto' });
var width2 = div2.width();
div.remove();
return width1 - width2;
}
getScrollBarWidth()
将返回滚动条的准确宽度,无论使用哪种浏览器,我可以根据需要添加和移除填充。
var sWidth = getScrollBarWidth();
$("body").css({'overflow': 'hidden'});
$("html").css({'padding-right': sWidth});
$('html, body').delay(1000).animate({
scrollTop: $(hash).offset().top - 170
}, 2000, 'swing', function(){
$("body").css({'overflow': 'auto'});
$("html").css({'padding-right': 0});
});
非常感谢。这个真不错。
body
和screen
。 - user578895<html>
和<body>
元素作为包装器和内容容器一起使用时遇到了一些问题,但我怀疑这可能与<body>
不像其他元素那样运作有关。谢谢,我会使用您的答案来解决我的问题。 - Steevenpadding-right
放在 HTML 上,所以树和右侧背景之间存在间隙。我认为如果您在#screen
上这样做,这个问题就会消失。 - user578895