css 如何禁用网页中的滚动条?(不是隐藏滚动条)

8cdiaqws  于 2023-04-13  发布在  其他
关注(0)|答案(5)|浏览(210)

使用:

$('body,html').css("overflow","hidden");

页面中的滚动条能够完全隐藏。但我希望滚动条在一些 AJAX 事件中只是DISABLED。以后使用:
$('body,html').css("overflow","visible");
我不得不再次启用滚动整个页面在我 AJAX 成功。

**(像删除scrollbar中的滚动框和禁用滚动箭头)**但仍然滚动条出现在窗口中。这将防止同时更改页面宽度。

有没有可能做到这一点?任何帮助是appriciated。提前感谢。

owfi6suc

owfi6suc1#

下面是工作代码:

body
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

我用过了,和你想要的一样。

vx6bjr1n

vx6bjr1n2#

试试这个

<style type="text/css">
  body {
         overflow:hidden;
       }
</style>
g2ieeal7

g2ieeal73#

如果你想禁用滚动条的点击和拖动功能,你可以用position: fixed; top: 0; right: 0; height: 100%; width: 25px;在滚动条前面呈现一个隐藏的div。
http://jsfiddle.net/Bg9zp/(htm-class可以是你的html/body)
因此,它是禁用的点击,但滚动功能是'nt禁用。(您可以滚动与鼠标滚轮和与“选择文本由拉鼠标出文本框”)
如果您想禁用滚动功能,您必须添加另一个div,在没有“disabled-opacity”的情况下禁用用户输入:
http://jsfiddle.net/dKP53/(htm-class可以是你的html/body)

nimxete2

nimxete24#

我也遇到了同样的问题。我认为CSS没有解决方案,因为它没有直接实现。
我已经找到了两个解决方案,但我更喜欢第二个:
1.使用JS而不是CSS自己设置边距。滚动条的宽度为17 px,所以你得到的边距,就像代码示例中一样。当你不需要滚动锁时,只需再次设置margin:auto; overflow-y:auto;。这种方法的缺点是,当用户放大时,他可能看不到div的其余部分。

margin-left = (bodywidth - sitewidth) / 2 - 17;
margin-right = (bodywidth - sitewidth) / 2 + 17;
overflow-y:hidden;

1.使用JS锁定滚动。以window.onscroll-event为例。以scrollMethod2为例,它更难,但它几乎在任何方面都更好。这对我来说都非常完美,没有延迟(不会“回飞”你回来,你真的停留在滚动位置(scrollMethod)或可滚动部分(scrollMethod 2))。这里有一个示例:

// scroll lock needed? Set it in your method
var scrollLock = false;
window.onresize = function() {
    if (scrollLock) {
        scrollMethod();
    }
}

// Set here your fix scroll position
var fixYScrollPosition = 0;
// this method makes that you only can scroll horizontal
function scrollMethod(){
    // scrolls to position
    window.scrollTo(window.scrollX, fixYScrollPosition); // window.scrollX gives actual position
}

// when you zoom in or you have a div which is scrollable, you can watch only the height of the div
function scrollMethod2() {
    var windowHeight = window.innerHeight;
    // the actual y scroll position
    var scrollHeight = window.scrollY;
    // the height of the div under the window
    var restHeight = scrollableDivHeight - (scrollHeight + windowHeight);
    // the height of the div over the window
    var topDivHeight = scrollHeight - /* the height of the content over the div */;
    // Set the scroll position if needed
    if (restHeight <= 0) {
        // don't let the user go under the div
        window.scrollTo(window.scrollX, scrollHeight + restHeight);
    }
    else if (scrollHeight - /* the height of the content over the div */ < 0) {
        // don't let the user go over the div
        window.scrollTo(window.scrollX, scrollHeight - topDivHeight);
    }
}

希望一切都是正确的。谢谢你的阅读,希望这对你有帮助或给了你一个想法,如何做到这一点:)
编辑:你也可以隐藏标准的滚动条,用一个自定义的滚动条代替它。

k97glaaz

k97glaaz5#

这对我很有效

body::-webkit-scrollbar {
display: none; 
}

相关问题