jquery 如何创建滚动条占位符

cwdobuhd  于 2023-08-04  发布在  jQuery
关注(0)|答案(5)|浏览(142)

我的问题是,浏览器窗口垂直滚动条被删除,例如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});

    });


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

niknxzdl

niknxzdl1#

不如这样:

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

动画之后:

  • 删除内容上的右填充
  • 在父级上显示滚动

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

c0vxltue

c0vxltue2#

我只是看了你的网站,想到了另一种方法。如果你用overflow:hidden隐藏滚动条,你也可以重新实现滚动。
将事件附加到上一页/下一页/主页/结束/箭头向上/箭头向下、鼠标滚轮向上/鼠标滚轮向下,然后执行

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

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

j91ykkif

j91ykkif3#

让你的内容比容器少几个像素,并切换overflow-y属性,怎么样?
滚动条在不同的浏览器/操作系统上可以有不同的宽度。如果你不打算计算滚动条的宽度,你最好把它足够宽,这样它就可以在所有浏览器上工作。
Example

mzmfm0qo

mzmfm0qo4#

您可以使用http://jscrollpane.kelvinluck.com/对滚动条给予一些控制,并从滚动条开始工作。

edqdpe6u

edqdpe6u5#

显示禁用的滚动条就像设置溢出:滚动一样简单;
仅垂直方向为overflow-y:scroll

相关问题