DISABLE the Horizontal Scroll [closed]

前端未结

关注

 12  770

时光说笑

相关标签:

12条回答

孤独总比滥情好

2020-11-27 09:58
I know it's too late, but there is an approach in javascript that can help you detect witch html element is causing the horizontal overflow -> scrollbar to appear

Here is a link to the post on CSS Tricks
```
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);
```
it Might return something like this:
```
<div class="div-with-extra-width">...</div>
```
then you just remove the extra width from the div or set it's max-width:100%

Hope this helps!

It fixed the problem for me :]
0 讨论(0)
发布评论:

提交评论
- 加载中...
遥遥无期

2020-11-27 10:00
I just had to deal with it myself. After all I found this method most easy and useful. Just add
```
overflow-x: hidden;
```
To your outer parent. In my case it looks like this:
```
<body style="overflow-x: hidden;">
```
You have to use overflow-x because if you use simply use overflow you disable the vertical scrolling too, namely overflow-y

If the vertical scrolling is still disabled you can enable it explicitly with:
```
overflow-y: scroll;
```
I know its somewhat not a proper way because if everything was setup well one would not have to use this quick and dirty method.
0 讨论(0)
发布评论:

提交评论
- 加载中...

野的像风

2020-11-27 10:01

this is the nasty child of your code :)

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

replace it with

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

0 讨论(0)

不知归路

2020-11-27 10:02

You can override the body scroll event with JavaScript, and reset the horizontal scroll to 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;
});

I don't advise doing this because it limits functionality for users with small screens.

0 讨论(0)

北荒

2020-11-27 10:05
So to fix this properly, I did what others here did and used css to get hide the horizontal toolbar:
```
.name {
  max-width: 100%;
  overflow-x: hidden;
}
```
Then in js, I created an event listener to look for scrolling, and counteracted the users attempted horizontal scroll.
```
var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);
```
I saw somebody do something similar, but apparently that didn't work. This however is working perfectly fine for me.
0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2020-11-27 10:07

Try this one to disable width-scrolling just for body the all document just is body body{overflow-x: hidden;}

0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题