Just disable scroll not hide it

Question

I m trying to disable the html body scrollbar of the parent while I m using a lightbox  The main word here is disable  I do not want to hide it with overflow  hidden    The reason for this is that overflow  hidden makes the site jump and take up the area where the scroll was   I want to know if its possible to disable a scrollbar while still showing it

User · Accepted Answer

If the page under the overlayer can be  fixed  at the top  when you open the overlay you can set  body   position  fixed  overflow-y scroll     you should still see the right scrollbar but the content is not scrollable  When you close the overlay just revert these properties with  body   position  static  overflow-y auto     I just proposed this way only because you wouldn t need to change any scroll event  Update  You could also do a slight improvement  if you get the document documentElement scrollTop property via javascript just before the layer opening  you could dynamically assign that value as top property of the body element  with this approach the page will stand in its place  no matter if you re on top or if you have already scrolled    Css   noscroll   position  fixed  overflow-y scroll     JS     body   css  top   - document documentElement scrollTop     px             addClass  noscroll

User · Answer

This worked really well for me         disable scrolling    body   bind  mousewheel touchmove   lockScroll       enable scrolling    body   unbind  mousewheel touchmove   lockScroll        lock window scrolling function lockScroll e        e preventDefault        just wrap those two lines of code with whatever decides when you are going to lock scrolling   e g      button   on  click   function             body   bind  mousewheel touchmove   lockScroll

User · Answer

I m the OP  With the help of answer from fcalderan I was able to form a solution  I leave my solution here as it brings clarity to how to use it  and adds a very crucial detail  width  100    I add this class  body noscroll       position  fixed       overflow-y  scroll      width  100       this worked for me and I was using Fancyapp

User · Answer

If the page under the overlayer can be  fixed  at the top  when you open the overlay you can set   disableScroll   position  fixed  overflow-y scroll     provide this class to the scrollable body  you should still see the right scrollbar but the content is not scrollable   To maintain the position of the page do this in jquery     body   css  top   -    window  scrollTop       px   addClass  disableScroll      When you close the overlay just revert these properties with  var top      body   position   top     body   removeClass  disableScroll   css  top   0  scrollTop Math abs top      I just proposed this way only because you wouldn t need to change any scroll event

User · Answer

You can hide the body s scrollbar with overflow  hidden and set a margin at the same time so that the content doesn t jump   let marginRightPx   0  if window getComputedStyle        let bodyStyle   window getComputedStyle document body       if bodyStyle            marginRightPx   parseInt bodyStyle marginRight  10            let scrollbarWidthPx   window innerWidth - document body clientWidth  Object assign document body style        overflow   hidden       marginRight     marginRightPx   scrollbarWidthPx px        And then you can add a disabled scrollbar to the page to fill in the gap    x000D   x000D  textarea   x000D    overflow-y  scroll  x000D    overflow-x  hidden  x000D    width  11px  x000D    outline  none  x000D    resize  none  x000D    position  fixed  x000D    top  0  x000D    right  0  x000D    bottom  0  x000D    border  0  x000D    x000D   lt textarea gt  lt  textarea gt  x000D   x000D   x000D    I did exactly this for my own lightbox implementation  Seems to be working well so far

User · Answer

I had a similar problem  a left-hand menu that  when it appears  prevents scrolling  As soon as height was set to 100vh  the scrollbar disappeared and the content jerked to the right   So if you don t mind keeping the scrollbar enabled  but setting the window to full height so it won t actually scroll anywhere  then another possibility is setting a tiny bottom margin  which will keep the scroll bars showing   body       height  100vh      overflow  hidden      margin  0 0 1px

User · Answer

This is the solution we went with  Simply save the scroll position when the overlay is opened  scroll back to the saved position any time the user attempted to scroll the page  and turn the listener off when the overlay is closed   It s a bit jumpy on IE  but works like a charm on Firefox Chrome    x000D   x000D  var body      body    x000D    overlay       overlay    x000D    overlayShown   false  x000D    overlayScrollListener   null  x000D    overlaySavedScrollTop   0  x000D    overlaySavedScrollLeft   0  x000D   x000D  function showOverlay     x000D    overlayShown   true  x000D   x000D       Show overlay x000D    overlay addClass  overlay-shown    x000D   x000D       Save scroll position x000D    overlaySavedScrollTop   body scrollTop    x000D    overlaySavedScrollLeft   body scrollLeft    x000D   x000D       Listen for scroll event x000D    overlayScrollListener   body scroll function     x000D         Scroll back to saved position x000D      body scrollTop overlaySavedScrollTop   x000D      body scrollLeft overlaySavedScrollLeft   x000D        x000D    x000D   x000D  function hideOverlay     x000D    overlayShown   false  x000D   x000D       Hide overlay x000D    overlay removeClass  overlay-shown    x000D   x000D       Turn scroll listener off x000D    if  overlayScrollListener    x000D      overlayScrollListener off    x000D      overlayScrollListener   null  x000D      x000D    x000D   x000D     Click toggles overlay x000D    window  click function     x000D    if   overlayShown    x000D      showOverlay    x000D      else   x000D      hideOverlay    x000D      x000D      x000D     Required    x000D  html  body   margin  0  padding  0  height  100   background   fff    x000D  html   overflow  hidden    x000D  body   overflow-y  scroll    x000D   x000D     Just for looks    x000D   spacer   height  300   background  orange  background  linear-gradient  ff0   f0f     x000D   overlay   position  fixed  top  20px  bottom  20px  left  20px  right  20px  z-index  -1  background   fff  box-shadow  0 0 5px rgba 0  0  0   3   overflow  auto    x000D   overlay  spacer   background  linear-gradient  88f   0ff     x000D   overlay-shown   z-index  1    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt h1 gt Top of page lt  h1 gt  x000D   lt p gt Click to toggle overlay   This is only scrollable when overlay is  lt em gt not lt  em gt  open   lt  p gt  x000D   lt div class  spacer  gt  lt  div gt  x000D   lt h1 gt Bottom of page lt  h1 gt  x000D   lt div id  overlay  class  overlay  gt  x000D     lt h1 gt Top of overlay lt  h1 gt  x000D     lt p gt Click to toggle overlay   Containing page is no longer scrollable  but this is   lt  p gt  x000D     lt div class  spacer  gt  lt  div gt  x000D     lt h1 gt Bottom of overlay lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You cannot disable the scroll event  but you can disable the related actions that lead to a scroll  like mousewheel and touchmove      body   on  mousewheel touchmove   function e          e preventDefault

User · Answer

I like to stick to the  overflow  hidden  method and just add padding-right that s equal to the scrollbar width   Get scrollbar width function  by lostsource   function getScrollbarWidth         var outer   document createElement  div        outer style visibility    hidden       outer style width    100px       outer style msOverflowStyle    scrollbar      needed for WinJS apps      document body appendChild outer        var widthNoScroll   outer offsetWidth         force scrollbars     outer style overflow    scroll           add innerdiv     var inner   document createElement  div        inner style width    100        outer appendChild inner                var widthWithScroll   inner offsetWidth          remove divs     outer parentNode removeChild outer        return widthNoScroll - widthWithScroll      When showing the overlay  add  noscroll  class to html and add padding-right to body     html  addClass  noscroll      body  css  paddingRight   getScrollbarWidth      px      When hiding  remove the class and padding     html  removeClass  noscroll      body  css  paddingRight   0     The noscroll style is just this    noscroll   overflow  hidden      Note that if you have any elements with position fixed you need to add the padding to those elements too

User · Answer

With jQuery inluded     disable    fn disableScroll   function         window oldScrollPos     window  scrollTop           window  on  scroll scrolldisabler  function   event              window  scrollTop  window oldScrollPos           event preventDefault                 enable    fn enableScroll   function           window  off  scroll scrolldisabler         usage    disable     selector   disableScroll      enable     selector   enableScroll

User · Answer

The position  fixed  solution has a drawback - the page jumps to the top when this style is applied  Angular s Material Dialog has a nice solution  where they fake the scroll position by applying positioning to the html element  Below is my revised algorithm for vertical scrolling only  Left scroll blocking is done in the exact same manner     This class applies the following styles     position  fixed     overflow-y  scroll     width  100   const NO SCROLL CLASS    quot bp-no-scroll quot    const coerceCssPixelValue   value   gt      if  value    null        return  quot  quot          return typeof value      quot string quot    value      value px       export const blockScroll        gt      const html   document documentElement    const documentRect   html getBoundingClientRect      const   body     document        Cache the current scroll position to be restored later    const cachedScrollPosition       -documentRect top    body scrollTop    window scrollY    document scrollTop    0        Cache the current inline  top  value in case the user has set it    const cachedHTMLTop   html style top     quot  quot         Using  html  instead of  body   because  body  may have a user agent margin       whereas  html  is guaranteed not to have one    html style top   coerceCssPixelValue -cachedScrollPosition         Set the magic class    html classList add NO SCROLL CLASS         Return a function to remove the scroll block    return      gt        const htmlStyle   html style      const bodyStyle   body style          We will need to seamlessly restore the original scroll position using         window scroll   To do that we will change the scroll behavior to  auto          Here we cache the current scroll behavior to restore it later      const previousHtmlScrollBehavior   htmlStyle scrollBehavior     quot  quot       const previousBodyScrollBehavior   bodyStyle scrollBehavior     quot  quot           Restore the original inline  top  value      htmlStyle top   cachedHTMLTop          Remove the magic class      html classList remove NO SCROLL CLASS           Disable user-defined smooth scrolling temporarily while we restore the scroll position      htmlStyle scrollBehavior   bodyStyle scrollBehavior    quot auto quot           Restore the original scroll position      window scroll         top  cachedScrollPosition top                 Restore the original scroll behavior      htmlStyle scrollBehavior   previousHtmlScrollBehavior      bodyStyle scrollBehavior   previousBodyScrollBehavior           The logic is very simple and can be simplified even more if you don t care about certain edge cases  For example  this is what I use  export const blockScroll        gt      const html   document documentElement    const documentRect   html getBoundingClientRect      const   body     document    const screenHeight   window innerHeight        Only do the magic if document is scrollable   if  documentRect height  gt  screenHeight        const cachedScrollPosition         -documentRect top    body scrollTop    window scrollY    document scrollTop    0       html style top   coerceCssPixelValue -cachedScrollPosition        html classList add NO SCROLL CLASS        return      gt          html classList remove NO SCROLL CLASS          window scroll           top  cachedScrollPosition          behavior   quot auto quot

User · Answer

This will stop the viewport jumping to the top by saving the scroll position and restoring it on enabling scrolling    CSS   no-scroll    position  fixed     width 100     min-height 100vh    top 0    left 0    overflow-y scroll important      JS  var scrollTopPostion   0   function scroll pause      scrollTopPostion     window  scrollTop         body   addClass  no-scroll   css   top  -1 scrollTopPostion  px        function scroll resume         body   removeClass  no-scroll   removeAttr  style        window  scrollTop scrollTopPostion       Now all you need to do is to call the functions    document  on  click    DISABLEelementID  function       scroll pause           document  on  click    ENABLEelementID  function       scroll resume

User · Answer

I have made this one function  that solves this problem with JS  This principle can be easily extended and customized that is a big pro for me  Using this js DOM API function  const handleWheelScroll    element    gt   event    gt      if   element        throw Error  quot Element for scroll was not found quot          const   deltaY     event    const   clientHeight  scrollTop  scrollHeight     element    if  deltaY  lt  0        if  -deltaY  gt  scrollTop          element scrollBy           top  -scrollTop          behavior   quot smooth quot                   event stopPropagation          event preventDefault              return         if  deltaY  gt  scrollHeight - clientHeight - scrollTop        element scrollBy         top  scrollHeight - clientHeight - scrollTop        behavior   quot smooth quot               event stopPropagation        event preventDefault        return          In short  this function will stop event propagation and default behavior if the scroll would scroll something else then the given element  the one you want to scroll in   Then you can hook and unhook this up like this  const wheelEventHandler   handleWheelScroll elementToScrollIn    window addEventListener  quot wheel quot   wheelEventHandler        passive  false       window removeEventListener  quot wheel quot   wheelEventHandler    Watch out for that it is a higher order function so you have to keep a reference to the given instance  I hook the addEventListener part in mouse enter and unhook the removeEventListener in mouse leave events in jQuery  but you can use it as you like

User · Answer

You can do it with Javascript      Classic JS window onscroll   function ev      ev preventDefault          jQuery   window  scroll function ev      ev preventDefault        And then disable it when your lightbox is closed   But if your lightbox contains a scroll bar  you won t be able to scroll while it s open  This is because window contains both body and  lightbox  So you have to use an architecture like the following one    lt body gt     lt div id  global  gt  lt  div gt     lt div id  lightbox  gt  lt  div gt   lt  body gt    And then apply the onscroll event only on  global

User · Answer

Another solution to get rid of content jump on fixed modal  when removing body scroll is to normalize page width  body  width  100vw  overflow-x  hidden    Then you can play with fixed position or overflow hidden for body when the modal is open  But it will hide horizontal scrollbars - usually they re not needed on responsive website

User · Answer

All modal lightbox javascript-based systems use an overflow when displaying the modal lightbox  on html tag or body tag   When lightbox is show  the js push a overflow hidden on html or body tag  When lightbox is hidden  some remove the hidden other push a overflow auto on html or body tag   Developers who work on Mac  do not see the problem of the scrollbar   Just replace the hidden by an unset not to see the content slipping under the modal of the removal of the scrollbar   Lightbox open show    lt html style  overflow  unset   gt  lt  html gt    Lightbox close hide    lt html style  overflow  auto   gt  lt  html gt

User · Answer

Crude but working way will be to force the scroll back to top  thus effectively disabling scrolling   var  stopScroll   false  window onload   function event        document onscroll   function ev            if   stopScroll                document body scrollTop    0px                        When you open the lightbox raise the flag and when closing it lower the flag   Live test case

User · Answer

Four little additions to the accepted solution   Apply  noscroll  to html instead of to body to prevent double scroll bars in IE To check if there s actually a scroll bar before adding the  noscroll  class  Otherwise  the site will also jump pushed by the new non-scrolling scroll bar  To keep any possible scrollTop so the entire page doesn t go back to the top  like Fabrizio s update  but you need to grab the value before adding the  noscroll  class  Not all browsers handle scrollTop the same way as documented at http   help dottoro com ljnvjiow php  Complete solution that seems to work for most browsers  CSS html noscroll       position  fixed       overflow-y  scroll      width  100      Disable scroll if    document  height    gt    window  height           var scrollTop       html   scrollTop         html   scrollTop        body   scrollTop       Works for Chrome  Firefox  IE            html   addClass  noscroll   css  top  -scrollTop               Enable scroll var scrollTop   parseInt    html   css  top        html   removeClass  noscroll       html body   scrollTop -scrollTop    Thanks to Fabrizio and Dejan for putting me on the right track and to Brodingo for the solution to the double scroll bar

User · Answer

lt div id  lightbox  gt  is inside the  lt body gt  element  thus when you scroll the lightbox you also scroll the body  The solution is to not extend the  lt body gt  element over 100   to place the long content inside another div element and to add a scrollbar if needed to this div element with overflow  auto    x000D   x000D  html   x000D    height  100  x000D    x000D  body   x000D    margin  0  x000D    height  100  x000D    x000D   content   x000D    height  100   x000D    overflow  auto  x000D    x000D   lightbox   x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D    x000D   lt html gt  x000D     lt body gt  x000D       lt div id  content  gt much content lt  div gt  x000D       lt div id  lightbox  gt lightbox lt div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Now  scrolling over the lightbox  and the body as well  has no effect  because the body is no longer than 100  of the screen height

User · Answer

you can keep overflow hidden but manage scroll position manually   before showing keep trace of actual scroll position   var scroll      document  scrollTop     document  scrollLeft       show your lightbox and then reapply scroll position   document  scrollTop scroll 0   scrollLeft scroll 1      it should work

[javascript] Just disable scroll not hide it?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css