如何制作滚动条占位符
Posted
技术标签:
【中文标题】如何制作滚动条占位符【英文标题】：How to make a scrollbar placeholder 【发布时间】：2011-09-29 05:09:04 【问题描述】：我的问题是，例如 overflow:hidden; 删除的浏览器窗口垂直滚动条会在稍后重新出现时使页面跳转。我使用 jQuery 从访问者中删除滚动选项，同时脚本正在运行并将页面滚动到特定点，然后让它再次出现：
www.nebulafilm.dk/index.html?content
我可以为滚动条创建一个占位符，当它不存在时，它不会跳转回来？
或者是否可以“禁用”它并使其“变灰”？
我无法通过搜索找到任何解决方案。我在这里找到了类似的东西：***.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);
);
非常感谢。这是一个不错的。
【问题讨论】：
【参考方案1】：您可以使用http://jscrollpane.kelvinluck.com/ 让您对滚动条进行一些控制并以此进行工作。
【讨论】：
【参考方案2】：让你的内容比容器的宽度小几个像素并切换overflow-y属性怎么样？
滚动条在不同的浏览器/操作系统上可以有不同的宽度。如果您不打算计算滚动条的宽度，最好将其设置得足够宽，以便它适用于所有浏览器。
Example
【讨论】：
这需要准确了解容器的宽度并观察窗口resize 事件并根据更改进行更新。另外，您的20px 差异并不安全，因为滚动条可以比这更宽。
嗯，这很有趣！但是，当我尝试将宽度设置为比窗口小 20 像素时，我不会有问题吗？在该站点上，我没有为页面元素框设置任何特定宽度，而是仅设置可变宽度以使它们居中对齐。然后他们还会跳，正如我所见？
@cwolves 是的，这取决于您愿意放在页面上的复杂程度。这总是一个权衡。我认为您的解决方案设计过度，所以我提出了一个替代方案，在功能上进行了小幅权衡，但在性能上有所提高。【参考方案3】：
这个怎么样：
确定当前浏览器中滚动条的宽度 将内容 div 设置为padding-right: scrollbar-width
在父级上隐藏滚动
动画之后：
删除内容上的 padding-right 在父级上显示滚动我做了一个演示：http://jsfiddle.net/cwolves/ezLfU/1/
【讨论】：
是的，这是一个解决方案，如果不能直接操作滚动条。但这将取决于浏览器，并且是一项费力的工作。 怎么辛苦？我给了你一个计算滚动条宽度的演示 :) 实际实现需要你添加我制作的函数和高达 3 行代码，这些代码也在演示中（只需更改选择器）。 好吧，您必须为每种浏览器类型找到准确的滚动条宽度，并实施某种浏览器检查。而且它仍然不是一个安全的解决方案。但这是其中的一部分，也是一种可能的解决方案，所以感谢您的回答。 我给了你代码来找到确切的滚动条宽度......不需要额外的检查，它是完全安全的。你可以字面意思删除我给你的代码，用我的选择器替换body和screen
谢谢。很抱歉误解了您的代码。它实际上很精彩。虽然我在使其与 <html> 和 <body> 元素作为包装器和内容持有者一起工作时遇到了一些麻烦，但我怀疑这是因为 <body> 不像其他任何元素一样。谢谢，我会用你的回答来解决我的问题。【参考方案4】：
我刚刚查看了您的网站并想到了另一种方法。如果你用 overflow:hidden 隐藏滚动条，你也可以重新实现滚动。
将事件附加到page up/page down/home/end/向上箭头/向下箭头，鼠标滚轮向上/鼠标滚轮向下，然后执行
$(window).scrollTop($(window).scrollTop() + 15)
上面的代码显然很糟糕，只是一个示例，但您可能想尝试一下。
【讨论】：
好的，这是一个可以跨浏览器工作的解决方案。它虽然很复杂，而不是仅仅使滚动条变灰。但这似乎是不可能的。 对。通常浏览器不会让你在滚动条上弄得太多。您希望在您的网站上做一些复杂的事情，因此您可能会得到一个比优雅更复杂的解决方案。【参考方案5】：显示禁用的滚动条就像设置溢出一样简单：滚动；
仅垂直是overflow-y:scroll
【讨论】：
不不，当页面长于屏幕时，这不会给出禁用的滚动条。然后它开始“工作”，这是我试图阻止的。它必须被禁用或删除并替换为占位符。 啊，不，我不相信使用 javascript 是可能的，你需要一个浏览器插件来操作浏览器元素。我以为你只是想让你的页面在滚动条出现时不“跳转”。您可以做的一件事是设置滚动条的样式以匹配您的页面，但不幸的是它仅适用于 IE（例如：steve-terada.com）以上是关于如何制作滚动条占位符的主要内容，如果未能解决你的问题，请参考以下文章