Question

我的问题是，例如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});

    });

非常感谢。这是一个很好的。

Answer 1

这个怎么样：

确定当前浏览器中滚动条的宽度
将内容div设置为padding-right: scrollbar-width
隐藏父级滚动

并在动画之后：

删除内容中的填充
在父级

我做了一个演示：http://jsfiddle.net/cwolves/ezLfU/1/

Answer 2

我只是查看了您的网站并想到了另一种方法。如果你正在隐藏带有overflow：hidden的滚动条，你也可以重新实现滚动。

将事件附加到页面向上/向下翻页/主页/结束/向上箭头/向下箭头，鼠标向上滚动/鼠标滚轮向下，然后执行

$(window).scrollTop($(window).scrollTop() + 15)

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

Answer 3

如何使您的内容比容器宽几个像素，并切换overflow-y属性？

滚动条在不同的浏览器/操作系统上可以有不同的宽度。如果你不打算计算滚动条的宽度，你最好把它放宽到适合所有浏览器。

Example

Answer 4

您可以使用http://jscrollpane.kelvinluck.com/来控制滚动条并从中进行操作。

Answer 5

显示禁用的滚动条就像设置overflow：scroll;

垂直只有overflow-y:scroll

如何制作滚动条占位符

5 个答案: