DISABLE the Horizontal Scroll

Question

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      And this is after I scroll to the right

User · Answer

name             max-width  100           overflow-x  hidden          You apply the above style or you can create function in javaScript to solve that problem

User · Answer

Try adding this to your CSS  html  body       max-width  100       overflow-x  hidden

User · Answer

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

User · Answer

If you want to disable horizontal scrolling over the entire screen width  use this code    x000D   x000D  element   x000D    max-width  100vw  x000D    overflow-x  hidden  x000D    x000D   x000D   x000D    This works better than  100   because it ignores the parent width and instead uses the viewport

User · Answer

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  gt  docWidth          console log el                  it Might return something like this    lt div class  div-with-extra-width  gt     lt  div gt    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

User · Answer

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  gt  docWidth    console log el            Now i m searching about more

User · Answer

Koala dev s answer will work  but in case you are wondering this is the reason why it works     q html  body                 lt --applying this css block to everything in the                              html code   q max-width  100             lt --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         lt --anything that occurs off the X axis of the                               page is hidden  so that you wont see it going                               off the page

User · Answer

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    lt body style  overflow-x  hidden   gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[html] DISABLE the Horizontal Scroll

Examples related to html

Examples related to css