禁用水平滚动

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

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

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

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

请帮帮我!

以下是该页面的链接:http://www.green-panda.com/usd309bands/(断开链接)

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

这是加载第一页的时候:

enter image description here

这是在我向右滚动之后:

enter image description here

564627 次浏览
小开

您可以使用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;
}
小开

这是你代码的坏孩子:)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

将其替换为

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}
小开

尝试这个禁用宽度滚动只对身体 所有的文件只是一个实体 body{overflow-x: hidden;} < / p >

小开

所以为了正确地修复这个问题，我做了其他人在这里做的事情，并使用css来隐藏水平工具栏:

.name {
max-width: 100%;
overflow-x: hidden;
}

然后在js中，我创建了一个事件监听器来寻找滚动，并抵消用户试图水平滚动。

var scrollEventHandler = function()
{
window.scroll(0, window.pageYOffset)
}


window.addEventListener("scroll", scrollEventHandler, false);

我看到有人做了类似的事情，但显然没有成功。然而，这对我来说是完美的。

小开

我知道它太晚些时候了，但javascript中有一种方法可以帮助你检测html元素导致水平溢出->滚动条出现

这里有一个关于CSS技巧的帖子的链接

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

它可能返回如下内容:

<div class="div-with-extra-width">...</div>

那么你只需从div中删除额外的宽度或将其设置为max-width:100%

希望这能有所帮助!

它为我解决了这个问题。

小开

Koala_dev回答说这是可行的:

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

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

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

    height:auto!important;
小开

Koala_dev的答案是有效的，但如果你想知道为什么它是有效的:

.
q.html, body {              <--applying this css block to everything in the
html code.


q.max-width: 100%;          <--all items created must not exceed 100% of the
users screen size. (no items can be off the page
requiring scroll)


q.overflow-x: hidden;       <--anything that occurs off the X axis of the
page is hidden, so that you wont see it going
off the page.

．

小开
我只是不得不自己处理。毕竟我发现这个方法最简单和有用。 只需添加

overflow-x: hidden;

对你外在的父母。在我的例子中，它看起来是这样的:

<body style="overflow-x: hidden;">

你必须使用overflow-x，因为如果你只使用overflow，你也会禁用垂直滚动，即overflow-y

如果垂直滚动仍然被禁用，您可以显式地启用它:

overflow-y: scroll;

我知道这有点不合适，因为如果一切都设置好了，就不必使用这种快速而肮脏的方法。

小开

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

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

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

小开 
.name
{
max-width: 100%;
overflow-x: hidden;
}

你可以应用上面的样式，或者你可以在javaScript中创建函数来解决这个问题

小开

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

1号路

body { overflow-x:hidden; }
< p > 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); } } );

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


提交答案