如何制作滚动条占位符

6
我的问题是,通过例如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});

    });

非常感谢。这个真不错。
5个回答

5
这样怎么样:
  • 确定当前浏览器中滚动条的宽度
  • 将内容div设置为padding-right:scrollbar-width
  • 隐藏父元素上的滚动条

动画之后:

  • 删除内容上的padding-right
  • 在父元素上显示滚动条

我制作了一个演示:http://jsfiddle.net/cwolves/ezLfU/1/


好的,你需要找到每种浏览器类型的确切滚动条宽度,并实现某种浏览器检查。但即使如此,这也不是一种安全的解决方案。但这是其中的一部分,也是一种可能的解决方案,所以感谢你的回答。 - Steeven
2
我给你一段代码来查找精确的滚动条宽度……不需要额外的检查,而且完全安全。你可以___真的___将我给你的代码放入并将我的选择器替换为bodyscreen - user578895
谢谢。对于误解您的代码我很抱歉。它实际上非常出色。不过,我在将其与<html><body>元素作为包装器和内容容器一起使用时遇到了一些问题,但我怀疑这可能与<body>不像其他元素那样运作有关。谢谢,我会使用您的答案来解决我的问题。 - Steeven
看起来不错 :) 唯一的问题是,由于您将 padding-right 放在 HTML 上,所以树和右侧背景之间存在间隙。我认为如果您在 #screen 上这样做,这个问题就会消失。 - user578895
终于完成了!请查看更新。非常感谢您的出色回答。 - Steeven
显示剩余2条评论

1
我刚刚看了你的网站,想到了一种替代方法。如果你正在使用overflow:hidden隐藏滚动条,你也可以重新实现滚动。
将事件附加到page up/page down/home/end/arrow up/arrow down, mouse wheel up/mouse wheel down,然后执行。
$(window).scrollTop($(window).scrollTop() + 15)

上面的代码显然很糟糕,只是一个例子,但可能是你想尝试的东西。

好的,这是一个可以在各种浏览器中运行的解决方案。虽然它相当复杂,而不是只是将滚动条变灰。但似乎无论如何都不可能实现。 - Steeven
1
好的。通常浏览器不会让你过多地干扰滚动条。如果你想在网站上做一些复杂的事情,那么你可能会得到一个比优雅更复杂的解决方案。 - Jordan

1

将您的内容宽度减少几个像素,使其比容器窄,并切换overflow-y属性如何?

滚动条在不同的浏览器/操作系统上可能有不同的宽度。如果您不打算计算滚动条的宽度,则最好将其宽度调整到足够宽,以便在所有浏览器上都能正常工作。

示例


1
这需要准确地知道容器的宽度,并观察窗口的resize事件并在更改时进行更新。此外,您的20px差异并不安全,因为滚动条可能比它更宽。 - user578895
这很有趣!但是如果我尝试将宽度设置为比窗口小20像素,那么我不会遇到问题吗?在网站上,我没有为页面元素框设置任何特定的宽度,而只是使用可变宽度使它们居中对齐。那么它们仍然会跳动,就我所看到的而言? - Steeven
@cwolves 真的,这取决于您愿意在页面上投入的复杂性。这总是一个权衡。我认为您的解决方案过于工程化,所以我提供了一种替代方案,虽然在功能上有一些小的牺牲,但在性能上有所提升。 - Jan

1

-1

显示禁用的滚动条就像设置overflow:scroll一样简单;

仅垂直滚动可以使用overflow-y:scroll


不,这样做并不会在页面超过屏幕长度时禁用滚动条。然后它就会开始“工作”,而我正试图防止这种情况发生。必须将其禁用或删除,并替换为占位符。 - Steeven
啊,我不相信用JavaScript实现这个是可能的,你需要一个浏览器插件来操作浏览器元素。我以为你只是想让页面在滚动条出现时不会“跳动”。你可以做的一件事是将滚动条样式设置成与页面相匹配,但不幸的是,它只在IE中有效(例如:http://www.steve-terada.com)。 - AlienWebguy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接