我的问题是,浏览器窗口垂直滚动条被删除,例如overflow:hidden;
将使页面跳转,当它稍后重新出现。我使用jQuery从访问者中删除滚动选项,当脚本运行并将页面滚动到特定点时,然后使其再次出现。
我可以为滚动条做一个占位符吗?当它不存在的时候,它就不会跳回来了。
或者可以“禁用”它并使其“变灰”?
我无法通过搜索找到任何解决方案。我在这里发现了类似的东西:stackoverflow.com滚动条始终在那里。但不同的是,滚动条必须保持禁用状态,即使页面比窗口长。它只能通过我控制的另一个脚本再次“打开”。
这有可能吗
- 谢谢-谢谢
更新:
是时候更新状态了。
我在body
标签上设置的星星背景图像上遇到了一些问题。
当jQuery脚本(来自cwolves answer)将padding添加到html
标记中,因此应该将页面上的所有元素推到左侧时,背景图像仍然没有正确的行为。
我发现body
元素的React和任何div
元素都不一样。它不仅仅是html
标记中的一个“块”,就像任何其他块元素一样。它有自己的行为,显然不能以同样的方式欺骗。因此,背景图像是不可能触摸,而它是在body
。
但我花了些时间才意识到。。
最终的解决方案是如此愚蠢的简单,我几乎是在眼泪时发现,想到无尽的(我可能夸大了一点)小时的调查body
。
我只是简单地把所有东西都 Package 在一个<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});
});
型
非常感谢。这是一个很好的。
5条答案
按热度按时间niknxzdl1#
不如这样:
padding-right: scrollbar-width
动画之后:
我做了一个demo:http://jsfiddle.net/cwolves/ezLfU/1/
c0vxltue2#
我只是看了你的网站,想到了另一种方法。如果你用overflow:hidden隐藏滚动条,你也可以重新实现滚动。
将事件附加到上一页/下一页/主页/结束/箭头向上/箭头向下、鼠标滚轮向上/鼠标滚轮向下,然后执行
字符串
上面的代码显然是糟糕的,只是一个例子,但可能是你想尝试的。
j91ykkif3#
让你的内容比容器少几个像素,并切换overflow-y属性,怎么样?
滚动条在不同的浏览器/操作系统上可以有不同的宽度。如果你不打算计算滚动条的宽度,你最好把它足够宽,这样它就可以在所有浏览器上工作。
Example
mzmfm0qo4#
您可以使用http://jscrollpane.kelvinluck.com/对滚动条给予一些控制,并从滚动条开始工作。
edqdpe6u5#
显示禁用的滚动条就像设置溢出:滚动一样简单;
仅垂直方向为
overflow-y:scroll