DISABLE the Horizontal Scroll [closed]

2020-01-25 12:23发布

站内问答 / HTML/CSS
966 12 5

Ok for some reason my webpage scrolls from left to right and shows a lot of ugly space.

I have searched for results but they just made the scrollbar HIDDEN

That's now what I want, I want to physically DISABLE the horizontal scroll feature. I do not want the user to be able to scroll left to right on my page just up and down!

I have tried: overflow-x:hidden in css on my html tag but it only made the scrollbar hidden and did not disable the scroll.

Please help me!

Here is a link to the page: http://www.green-panda.com/usd309bands/ (Broken link)

This might give you a better idea of what I am talking about:

This is when the first pages loads:

enter image description here

And this is after I scroll to the right:

enter image description here

标签： html css
举报
12条回答
家丑人穷心不美
2楼-- · 2020-01-25 13:01

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) 举报
你好瞎i
3楼-- · 2020-01-25 13:05

You can try this all of method in our html page..

1st way

body { overflow-x:hidden; }

2nd way You can use the following in your CSS body tag:

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

That will remove your scrollbar.

3rd way

body { min-width: 1167px; }

5th way

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

6th way

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

4th way..

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

Now i m searching about more..!!!!

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
4楼-- · 2020-01-25 13:08

koala_dev answered that this will work:

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

And MarkWPiper comments that ":-/ Caused touch / momentum scrolling to stop working on iPhone"

The solution to keep touch / momentum on iPhone is to add this line inside the css block for html,body:

    height:auto!important;
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2020-01-25 13:10

If you want to disable horizontal scrolling over the entire screen width, use this code.

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

This works better than "100%" because it ignores the parent width and instead uses the viewport.

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
6楼-- · 2020-01-25 13:10

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) 举报
做自己的国王
7楼-- · 2020-01-25 13:10

Try adding this to your CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)