2024-10-08 10:00:07

禁用水平滚动

好吧,出于某种原因,我的网页从左向右滚动,显示了很多丑陋的空间。

我已经搜索了结果,但他们只是使滚动条隐藏

这就是我现在想要的,我想在物理上禁用水平滚动功能。我不希望用户能够在我的页面上从左到右只是上下滚动!

我尝试过:overflow-x:隐藏在css上我的html标签,但它只是使滚动条隐藏,并没有禁用滚动。

请帮帮我!

这是一个页面链接:http://www.green-panda.com/usd309bands/(坏链接)

这可能会让你更好地理解我在说什么:

这是加载第一页的时候:

这是在我向右滚动之后:


当前回答

试着把它添加到你的CSS中

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

其他回答

Koala_dev回答说这是可行的:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

MarkWPiper评论道:“/导致触控/动量滚动在iPhone上停止工作”

在iPhone上保持touch / momentum的解决方案是在html的css块中添加这一行,body:

    height:auto!important;

您可以使用JavaScript重写主体滚动事件,并将水平滚动重置为0。

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

我不建议这样做,因为它限制了小屏幕用户的功能。

试着把它添加到你的CSS中

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

如果您想禁用整个屏幕宽度的水平滚动,请使用此代码。

元素{ max-width: 100大众; overflow-x:隐藏; }

这比“100%”工作得更好,因为它忽略了父宽度,而是使用视口。

你可以在我们的html页面中尝试所有的方法。

1号路

body { overflow-x:hidden; }

2号路 你可以在你的CSS body标签中使用以下内容:

overflow-y: scroll; overflow-x: hidden;

这将删除您的滚动条。

3号路

body { min-width: 1167px; }

5号路

html, body { max-width: 100%; overflow-x: hidden; }

6日的方式

element { max-width: 100vw; overflow-x: hidden; }

4路. .

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

现在我正在搜索更多..!!!!