How to prevent scrollbar from repositioning web page

Question

I have a website with center-aligned DIV  Now  some pages need scrolling  some don t  When I move from one type to another  the appearance of a scrollbar moves the page a few pixels to the side  Is there any way to avoid this without explicitly showing the scrollbars on each page

User · Answer

media screen and  min-width  1024px       body       min-height  700px

User · Answer

overflow-y scroll is correct  but you should use it with the html tag  not body or else you get a double scrollbar in IE 7 So the correct css would be     html     overflow-y  scroll

User · Answer

kashesandr s solution worked for me but to hide horizontal scrollbar I added one more style for body  here is complete solution      CSS   lt style gt     prevent layout shifting and hide horizontal scroll    html     width  100vw    body     overflow-x  hidden     lt  style gt    JS    function                   For multiple modals         Enables scrolling of 1st modal when 2nd modal is closed                  modal   on  hidden bs modal   function  event          if      modal visible   length               body   addClass  modal-open                          JS Only Solution  when 2nd modal opened from 1st modal           For multiple modals     Enables scrolling of 1st modal when 2nd modal is closed          modal   on  hidden bs modal   function  event      if      modal visible   length           body   addClass  modal-open           body   css  padding-right   17

User · Answer

The solutions posted using calc 100vw - 100   are on the right track  but there is a problem with this  You ll forever have a margin to the left the size of the scrollbar  even if you resize the window so that the content fills up the entire viewport   If you try to get around this with a media query you ll have an awkward snapping moment because the margin won t progressively get smaller as you resize the window   Here s a solution that gets around that and AFAIK has no drawbacks   Instead of using margin  auto to center your content  use this   body   margin-left  calc 50vw - 500px       Replace 500px with half the max-width of your content  so in this example the content max-width is 1000px   The content will now stay centered and the margin will progressively decrease all the way until the content fills the viewport    In order to stop the margin from going negative when the viewport is smaller than the max-width just add a media query like so    media screen and  max-width 1000px        body           margin-left  0            Et voil

User · Answer

My approach is to make the track transparent  The scroll bar thumb color is  C1C1C1 to match the default scrollbar thumb color  You can make it anything you prefer    Try this  html       overflow-y  scroll     body  -webkit-scrollbar       width  0 7em      background-color  transparent     body  -webkit-scrollbar-thumb       background   C1C1C1      height 30px     body  -webkit-scrollbar-track-piece       display none

User · Answer

If the width of the table won t change  you can set the width of the element  such as tbody  that contains the scrollbar   100   allowing extra space for the scrollbar  and set overflow-y to  overlay   so that the scrollbar stays fixed  and won t shift the table left when it appears   Also set a fixed height for the element with the scrollbar  so the scrollbar will appear once the height is exceeded  Like so   tbody     height  100px    overflow-y  overlay    width  105      Note  you will have to manually adjust the width   as the   of space the scrollbar takes up will be relative to your table width  ie  smaller width of table  more   required to fit the scrollbar  as it s size in pixels is constant   A dynamic table example    x000D   x000D  function addRow tableID  x000D    x000D      var table   document getElementById tableID   x000D      var rowCount   table rows length  x000D      var row   table insertRow rowCount   x000D      var colCount   table rows 0  cells length  x000D     x000D      for var i 0  i lt colCount  i    x000D        x000D          var newRow   row insertCell i   x000D   x000D          newRow innerHTML   table rows 0  cells i  innerHTML  x000D          newRow childNodes 0  value       x000D        x000D    x000D    x000D  function deleteRow row  x000D    x000D      var table   document getElementById  data    x000D      var rowCount   table rows length  x000D      var rowIndex   row parentNode parentNode rowIndex  x000D   x000D      document getElementById  data   deleteRow rowIndex   x000D    x000D   scroll-table   x000D    border-collapse  collapse  x000D    x000D   x000D   scroll-table tbody   x000D    display block  x000D    overflow-y overlay  x000D    height 60px  x000D    width  105  x000D    x000D   x000D   scroll-table tbody td   x000D    color   333  x000D    padding  10px  x000D    text-shadow  1px 1px 1px  fff  x000D    x000D   x000D   scroll-table thead tr   x000D    display block  x000D    x000D   x000D   scroll-table td   x000D      border-top  thin solid   x000D      border-bottom  thin solid  x000D    x000D   x000D   scroll-table td first-child   x000D      border-left  thin solid  x000D    x000D   x000D   scroll-table td last-child   x000D      border-right  thin solid  x000D    x000D   x000D   scroll-table tr first-child   x000D      display  none  x000D    x000D   x000D   delete button   x000D      background-color  red  x000D      color  white  x000D    x000D   x000D   container   x000D    display  inline-block  x000D    x000D   x000D  body   x000D    text-align  center  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt link rel  stylesheet  href  test table css  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   lt h1 gt Dynamic Table lt  h1 gt  x000D   lt div class  container  gt  x000D   x000D     lt table id  data  class  scroll-table  gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt  lt input type  text    gt  lt  td gt  x000D           lt td gt  lt input type  text    gt  lt  td gt  x000D           lt td gt  lt input type  button  class  delete button  value  X  onclick  deleteRow this   gt  lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   x000D     lt input type  button  value  Add  onclick  addRow  data      gt  x000D   x000D   lt  div gt  x000D   x000D   lt script src  test table js  gt  lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I use to have that problem  but the simples way to fix it is this  this works for me    on the CSS file type   body overflow-y scroll     as that simple

User · Answer

I ve solved the issue on one of my websites by explicitly setting the width of the body in javascript by the viewport size minus the width of the scrollbar  I use a jQuery based function documented here to determine the width of the scrollbar    lt body id  bodyid gt   var bodyid   document getElementById  bodyid    bodyid style width   window innerWidth - scrollbarWidth      px

User · Answer

Expanding on the answer using this   body       width  calc 100vw - 17px       One commentor suggested adding left-padding as well to maintain the centering   body       padding-left  17px      width  calc 100vw - 17px       But then things don t look correct if your content is wider than the viewport  To fix that  you can use media queries  like this    media screen and  min-width  1058px        body           padding-left  17px          width  calc 100vw - 17px             Where the 1058px   content width   17   2  This lets a horizontal scrollbar handle the x overflow and keeps the centered content centered when the viewport is wide enough to contain your fixed-width content

User · Answer

With scroll always being shown  maybe be not good for layout   Try to limit body width with css3  body       width  calc 100vw - 34px       vw is the width of the viewport  see this link for some explanation   calc calculate in css3  34px stands for double scrollbar width  see this for fixed or this to calculate if you don t trust fixed sizes

User · Answer

If changing size or after loading some data it is adding the scroll bar then you can try following  create class and apply this class    auto-scroll      overflow-y  overlay     overflow-x  overlay

User · Answer

html     overflow-x  hidden    margin-right  calc -1    100vw - 100         Example  Click  change min-height  button   With calc 100vw - 100   we can calculate the width of the scrollbar  and if it is not displayed  it will be 0   Idea  using negative margin-right  we can increase the width of  lt html gt  to this width  You will see a horizontal scroll bar     it should be hidden using overflow-x  hidden

User · Answer

I used some jquery to solve this     html   css        overflow-y    hidden         document  ready function        window  load function            html   css          overflow-y

User · Answer

I don t know if this is an old post  but i had the same problem and if you want to scroll vertically only you should try overflow-y scroll

User · Answer

Extending off of Rapti s answer  this should work just as well  but it adds more margin to the right side of the body and hides it with negative html margin  instead of adding extra padding that could potentially affect the page s layout  This way  nothing is changed on the actual page  in most cases   and the code is still functional   html       margin-right  calc 100  - 100vw     body       margin-right  calc 100vw - 100

User · Answer

Wrap the content of your scrollable element into a div and apply padding-left  calc 100vw - 100       lt body gt       lt div style  padding-left  calc 100vw - 100     gt          Some Content that is higher than the user s screen      lt  div gt   lt  body gt    The trick is that 100vw represents 100  of the viewport including the scrollbar  If you subtract 100   which is the available space without the scrollbar  you end up with the width of the scrollbar or 0 if it is not present  Creating a padding of that width on the left will simulate a second scrollbar  shifting centered content back to the right   Please note that this will only work if the scrollable element uses the page s entire width  but this should be no problem most of the time because there are only few other cases where you have centered scrollable content

User · Answer

I tried to fix likely the same issue which caused by twitter bootstrap  modal-open class applied to body  The solution html  overflow-y  scroll  doesn t help  One possible solution I found is to add  width  100   width  100vw  to the html element

User · Answer

I think not  But styling body with overflow  scroll should do  You seem to know that  though

User · Answer

Contrary to the accepted answer which suggests a permanent scroll bar on the browser window even if the content doesn t overflow the screen  I would prefer using   html    height 101       This is because the appearance of scroll bar makes more sense if the content actually overflows   This makes more sense than this

User · Answer

Simply setting the width of your container element like this will do the trick  width  100vw    This will make that element ignore the scrollbar and it works with background color or images

[html] How to prevent scrollbar from repositioning web page?

Examples related to html

Examples related to css