Html 禁用水平滚动_Html_Css - Fatal编程技术网

Html 禁用水平滚动

html css

Html 禁用水平滚动,html,css,Html,Css,好吧，由于某种原因，我的网页从左向右滚动，显示了很多丑陋的空间我已经搜索了结果，但他们只是隐藏了滚动条这就是我现在想要的，我想物理上禁用水平滚动功能。我不希望用户能够在我的页面上从左向右滚动，只是上下滚动我在我的html标记上尝试了：css中的overflow-x:hidden，但它只隐藏了滚动条，没有禁用滚动条请帮帮我这是一个页面链接：（断开的链接）这可能会让你更好地了解我在说什么：这是在加载第一个页面时：这是在我向右滚动之后：您可以使用JavaScript覆盖正文滚动事件

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

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

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

我在我的

html

标记上尝试了：css中的

overflow-x:hidden

，但它只隐藏了滚动条，没有禁用滚动条

请帮帮我

这是一个页面链接：（断开的链接）

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

这是在加载第一个页面时：

这是在我向右滚动之后：

您可以使用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: 100%;
}

尝试此选项可仅为正文禁用宽度滚动所有文档都只是正文

body{overflow-x:hidden；}

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

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

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

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

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

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

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

这里有一个链接到

它可能会返回如下内容：

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

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

。。。

然后您只需从

div

中删除额外的宽度，或者将其设置为

最大宽度：100%

希望这有帮助

它为我解决了这个问题：

koala_dev回答说，这将起作用：

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

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

在iPhone上保持接触/动力的解决方案是在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.

。
q、 html，body{我只需要自己处理它。毕竟我发现这个方法最简单、最有用。
加上
overflow-x: hidden;

给你的外父母。在我的情况下，它看起来是这样的：
<div class="div-with-extra-width">...</div>

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

我知道这有点不合适，因为如果一切都设置好，就不必使用这种快速而肮脏的方法。
如果要禁用整个屏幕宽度的水平滚动，请使用此代码

元素{
最大宽度：100vw；
溢出x：隐藏；
}
您可以应用上述样式，也可以使用javaScript创建函数来解决该问题
您可以在我们的html页面中尝试所有这些方法
第一路
body { overflow-x:hidden; }

第二条路
您可以在CSS正文标记中使用以下内容：
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); } } );

现在我正在搜索更多信息！！！！如果没有水平滚动条，你怎么能水平滚动？在笔记本电脑上，鼠标的两个手指从左向右移动。出于好奇，你的页面上有什么创建了默认滚动条？如何在没有滚动条的情况下滚动？在Windows上单击鼠标中键拖动。一定有一个块会有额外的滚动条填充，即扩展100%宽度删除，这将是一个很好的实践，效果很好。我很高兴我找到了理解我所说的内容的人！我会尽快接受。在Chrome 34中，这并不能真正阻止滚动。它隐藏滚动条，但通过中键滚动，我仍然可以看到左侧隐藏的元素。这确实可以esn不起作用当你将浏览器窗口最小化到最小容量时html起作用，你包括body，另一个滚动条出现：-/导致触摸/动量滚动停止在iPhone上工作我将尝试一下，CSS修复在我的项目上不起作用，即使这样也不起作用：（这不适用于meThis适用于我；但在移动设备上刷卡时会出现抖动；而移动速度会减慢。“正确”不完全正确，但仍然是一个很好的创造性答案。将其放在哪里？在body tag下或小屏幕的媒体查询下？@Umair感谢-编辑的评论，以澄清高度：自动线位于html、body css块中。非常感谢您提供高度：自动解决方案！作为网站说明，BoundingClienter比offsetWidth更精确：-绝对值救命恩人！谢谢，我喜欢教育。
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); } } );