如何制作滚动条占位符

我的问题是浏览器窗口垂直滚动条被删除,例如overflow:hidden; 当页面稍后重新出现时,会使页面跳转。 我使用jQuery从访问者中删除滚动选项,同时脚本正在运行并将页面滚动到特定点,然后再次重新出现:

www.nebulafilm.dk/index.html?content

我可以为滚动条创建一个占位符,当它不存在时,它不会回来吗?

或者是否可以“禁用”它并使其“灰显”?

我通过搜索找不到任何解决方案。 我在这里找到了类似的东西: stackoverflow.com滚动条总是在那里。 但不同之处在于,即使页面长于窗口,滚动条也必须保持禁用状态。 它必须只能通过我控制的另一个脚本再次“打开”。

这有可能吗?

谢谢。


更新:

状态更新的时间。

我在星形云背景图像上遇到了一些问题,这个图像是在body标签上设置的。
当jQuery脚本(来自cwolves回答)将填充添加到html标记并因此应该将页面上的所有元素推到左侧时,背景图像仍然表现不正常。

好吧,我发现body元素没有像任何div元素那样反应。 它不仅仅是html标签内的“块”,就像任何其他块元素一样。 它有自己的行为,显然不能以同样的方式被欺骗。 因此,背景图像是不可能触摸的,而它是在body
但我花了一些时间才意识到……

解决这个问题的最终解决方案是如此简单,以至于我在发现时几乎流泪,想着无尽的(我可能会夸大一点)时间来调查body
我只需将所有内容都包装在

然后将其作为背景图片。 突然间,一切都落到了位置。

从:

  ...  

 body {background-image: url(...);} 

至:

  
...

和:

 #body {background-image: url(...);} 

body明智一点。

不再“跳”了。 美味的。

效果现在已经完全运行,您几乎没有注意到滚动条的变化,每个细节都适合。 Cwolve的脚本是完美的,并进行精确计算:

 function getScrollBarWidth(){ var div = $('
' + new Array(100).join('content
') + '
'), 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}); }); 

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

这个怎么样:

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

并在动画之后:

  • 在内容上删除填充权限
  • 在父级上显示滚动

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

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

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

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

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

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

滚动条在不同的浏览器/操作系统上可以有不同的宽度。 如果你不打算计算滚动条的宽度,你最好把它放得足够宽,这样它就适用于所有的浏览器。

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

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

垂直只会overflow-y:scroll