Ste*_*ven 6 jquery scrollbar placeholder
我的问题是,例如删除的浏览器窗口垂直滚动条overflow:hidden;将使页面跳转,以后再次出现.我使用jQuery从访问者中删除滚动选项,同时脚本正在运行并将页面滚动到特定点,然后再次重新出现:
www.nebulafilm.dk/index.html?content
我可以为滚动条创建一个占位符,当它不存在时,它不会跳回来吗？
或者是否可以"禁用"它并使其"灰显"？
我通过搜索找不到任何解决方案.我在这里找到了类似的东西: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(...);}
并且有点明智body.
不再"跳"了.美味的.
效果现在完全运行,您几乎没有注意到滚动条的变化,每个细节都适合.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});
});
非常感谢.这是一个很好的.
这个怎么样:
padding-right: scrollbar-width并在动画之后:
我做了一个演示:http://jsfiddle.net/cwolves/ezLfU/1/