Question

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

我搜索了搜索结果，但他们只是滚动条 HIDDEN

现在就是我想要的，我希望物理禁用水平滚动功能。我不希望用户能够在我的页面上上下左右滚动！

我在overflow-x:hidden标记的css中尝试过：html，但它只隐藏了滚动条并且没有禁用滚动。

请帮帮我！

~~以下是该页面的链接：http://www.green-panda.com/usd309bands/~~ （断开链接）

这可能会让你更好地了解我在说什么：

这是第一页加载的时间：

enter image description here

这是在我滚动到右边后：

enter image description here

Answer 1

尝试将此添加到您的CSS

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

Answer 2

这是你代码中讨厌的孩子:)

.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%;
}

Answer 3

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

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

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

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

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

我看到有人做了类似的事，但显然没有用。然而，这对我来说非常好。

Answer 4

尝试这个禁用宽度滚动仅适用于身体所有文件都是正文 body{overflow-x: hidden;}

Answer 5

我知道它太晚了，但javascript中有一种方法可以帮助您检测巫婆html元素导致水平溢出 - ＆gt;滚动条出现

以下是CSS Tricks

上帖子的链接

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%

希望这有帮助！

它解决了我的问题：]

Answer 6

koala_dev回答说这会有效：

SET XACT_ABORT ON
BEGIN TRANSACTION;

UPDATE 
  LEAGUE
SET
    ALL_STAR = '1'
  , PLAYER = 'ACTIVE'
  , [DATE] = GETDATE()
FROM 
    LEAGUE lg
WHERE 
    lg.PLAYER_ID NOT IN (SELECT an.PLAYER_ID FROM ASSOCIATION an)

PRINT '******* ROLLBACK TRANSACTION ******* ';
ROLLBACK TRANSACTION;

--PRINT '******* COMMIT TRANSACTION ******* ';
--COMMIT TRANSACTION;

MarkWPiper评论说：“ - /触摸/动量滚动停止在iPhone上工作”

在iPhone上保持触控/动量的解决方案是在css块中为html添加此行，正文：

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

Answer 7

如果要在整个屏幕宽度上禁用水平滚动，请使用此代码。

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

这比“ 100％”效果更好，因为它会忽略父级宽度，而是使用视口。

Answer 8

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

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

Answer 9

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.

。

Answer 10

我只需要自己处理。毕竟，我发现此方法最简单实用。只需添加

overflow-x: hidden;

给你的外在父母。就我而言，它看起来像这样：

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

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

如果仍然禁用垂直滚动，则可以使用以下命令显式启用它：

overflow-y: scroll;

我知道它有些不合适，因为如果一切都设置正确，则不必使用这种快速而肮脏的方法。

Answer 11

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

您可以应用上述样式，也可以在 javaScript 中创建函数来解决该问题

Answer 12

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

第一种方式

body { overflow-x:hidden; }

第二种方式您可以在CSS body标签中使用以下内容：

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

这将删除您的滚动条。

第三种方式

body { min-width: 1167px; }

第五种方式

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

第六种方式

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

第四种方式。

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

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

禁用水平滚动

12 个答案: