How to disable scroll without hiding it?

by

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');

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. How to have html popup appear over main html page?
  3. Write tags in HTML and print
  4. Change from (+) symbol to (-) after click (function(){
  5. How can i create html automatic change page? [duplicate]
  6. Using jQuery to center a DIV on the screen
  7. jQuery: Get height of hidden element in jQuery
  8. How to disable HTML links
  9. horizontal scrollbar on top and bottom of table
  10. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  11. Refresh/reload the content in Div using jquery/ajax
  12. Animate element to auto height with jQuery
  13. How to style “input file” with CSS3 / Javascript? [duplicate]
  14. Show and hide divs at a specific time interval using jQuery
  15. How do I detect “shift+enter” and generate a new line in Textarea?
  16. Dashed border animation in css3 animation
  17. :touch CSS pseudo-class or something similar?
  18. CSS3-Animate elements if visible in viewport (Page Scroll)
  19. Open a new javascript window(.open) along with its CSS styling
  20. How to create a responsive image that also scales up in Bootstrap 3
  21. How can I detect when a new element has been added to the document in jquery?
  22. JavaScript Loading Screen while page loads
  23. Check if element is between 30% and 60% of the viewport
  24. How do I make a move up and down when I’m scrolling the page?
  25. Fade background image in and out with jQuery?
  26. jQuery – Sticky header that shrinks when scrolling down
  27. How do I detect the inherited background-color of an element using jQuery/JS?
  28. Convert dropdown to selection boxes with color and trigger drop down action
  29. Wrapping lists into columns
  30. Possible to reverse a css animation on class removal?

Leave a Comment