The fixed positioned element scrolling hack. I.e. for Bootstrap modals and the likes.

CSS-hack for i.e. Modals, Lightboxes or fixed slide-down menus that overflows screen-size and are not scrollable due to fixed position and a bullying body-element.

Add the '.noscroll' to body dynamically through Javascript and you are good to go. This example shows the solution for the Bootstrap modal-component - converting it to a full size element

This can be used with any fixed element you'll like to make scrollable (i.e. large menus in small devices) :

# Javascript
$('modal').on('show', function() { $('body').addClass('noscroll') })
$('modal').on('hide', function() { $('body').removeClass('noscroll') })


# CSS
body.noscroll { overflow: hidden; }

.modal {
  position: absolute;
  /* You can, of course, tweak this to position your element */
  top: 0; bottom: 0; left: 0; right: 0;
  overflow-y: scroll;
}

Solution 2

You can also call the following script and prevent scrolling on touch devices except on dom-elements with the ".scrollable" class.

# Javascript

$('body').on 'touchmove', (e) ->
  e.preventDefault() unless $('.scrollable').has($(e.target)).length