如何制作滚动条占位符 [英] How to make a scrollbar placeholder
问题描述
我的问题是，例如，当overflow:hidden;删除的浏览器窗口垂直滚动条会在以后重新出现时使页面跳转.在脚本运行并将页面滚动到特定点时，我使用jQuery从访问者中删除滚动选项，然后使其随后再次出现:
My problem is that the browser windows vertical scrollbar that is removed by for example overflow:hidden; will make the page jump, when it reappears later. I use jQuery to remove the scroll option from the visitor, while a script is running and scrolling the page to a specific point, and then to make it reappear again afterwards:
www.nebulafilm.dk/index.html?content
当滚动条不存在时，我可以为其做一个占位符，这样它不会跳转吗?
Can I make a placeholder for the scrollbar, when it is not present, so it won't jump back?
还是可以禁用"它并使其变灰"?
Or is it possible to "disable" it and have it "greyed out"?
我无法通过搜索找到任何解决方案.我在这里发现了类似的内容: stackoverflow.com ，其中滚动条始终在其中.但是不同之处在于，即使页面长于窗口，滚动条也必须保持禁用状态.只能通过我控制的另一个脚本再次打开"它.
I cannot find any solutions by searching. I have found something similar here: stackoverflow.com where the scrollbar is always there. But the difference is that the scrollbar must remain disabled, even if the page is longer than the window. It must only be "turned on" again through another script that I control.
这有可能吗?
谢谢.
更新:
状态更新的时间.
我在body标签上设置的星云背景图像有一些问题.
当jQuery脚本(来自cwolves的回答)在html标签中添加了填充，因此应将页面上的所有元素都推到左侧时，背景图像仍然无法正常工作.
I had some problems with the star cloud background image, which was set on the body tag.
When the jQuery script (from cwolves answer) added the padding to the html tag and therefore should push all elements on the page to the left, the background image still didn't behave right.
好吧，我发现body元素不会像任何div元素那样反应.它不像其他任何block元素一样，是html标记内的块".它有自己的行为，显然不能以相同的方式被欺骗.因此，在body上时，背景图像无法触摸.
但是我花了一些时间才意识到...
Well, I found out that the body element doesn't react like any div element. It is not just a "block" inside the html tag like any other block element. It has its own behaviors and apparently can't be tricked with in the same way. Therefore the background image was impossible to touch, while it was on body.
But it took me some time to realize...
最终的解决方案是如此愚蠢，以至于发现时我几乎流泪了，想到了无休止的(我可能会夸大一点)调查body的时间.
我只是将所有内容都包裹在<div id="body">中，并给了它背景图像.突然，一切都准备就绪.
The end solution to this is so flipping stupidly simple that I was almost in tears when finding out, thinking of the endless (I might exaggerate a little) hours of investigating the body.
I simply wrapped everything in a <div id="body"> and gave this the background image instead. Suddenly everything fell into place.
发件人:
<body>
...
</body>
还有
body {background-image: url(...);}
收件人:
<body>
<div id="body">
...
</div>
</body>
并且:
#body {background-image: url(...);}
关于body的一些建议.
不再跳跃".好吃.
效果现在已完全运行，您几乎不会注意到滚动条有任何变化，并且每个细节都适合. Cwolve的脚本非常完美，可以进行精确的计算:
The effect is now fully running and you almost doesn't notice a change with the scroll bar and every detail fits. Cwolve's script is perfect and does the exact calculation:
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()将完全包含滚动条的宽度，无论使用什么浏览器，我都可以使用它来添加和删除填充:
The getScrollBarWidth() will contain exactly the width of the scroll bar no matter the browser, and I can use it to add and remove paddings as I want to:
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});
});
非常感谢.这是一个不错的.
Thanks very much. This was a nice one.
推荐答案
这是怎么回事:
- 确定当前浏览器中滚动条的宽度
- 将内容div设置为
padding-right: scrollbar-width - 在父级上隐藏滚动
以及动画之后:
- 删除内容的右填充
- 在父级上显示滚动
我进行了演示: http://jsfiddle.net/cwolves/ezLfU/1/
这篇关于如何制作滚动条占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
