Disable page from scrolling when certain events happen.
Last updated 6 years ago by shaketbaby .
Apache License 2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ng-disable-scroll 
SYNC missed versions from official npm registry.

What does it do

Sometimes when a certain action happens, for instance, main menu slides out, it is often desirable to prevent the main body from scrolling and only allow the menu to be scrollable.

This is fairly easy to do on desktop browsers, all that is needed is to set root container to be "overflow: hidden"; but things are not so easy on mobile, and can be very tricky.

This is where ng-disable-scroll directive comes in.


  npm install --save ng-disable-scroll
  bower install --save ng-disable-scroll

How do I use it

It is very simple to use it.

  1. make your Angular app depends on ngDisableScroll module
  angular.module("app", [

or with Browserify or Webpack

  angular.module("app", [
  1. add 'ng-disable-scroll' to one of the element, and specify an expression which will be evaluated to be truthy when scrolling should be prevented.

For example when menu is open

  <div ng-disable-scroll="">
  1. optionally, can also specify which child element(s) are scrollable by providing an CSS selector; by default, the element where this directive is used will be used this is not specified.

One example use case is when there is a multi-level menu, only the second level menus are allowed to scroll

  <div ng-disable-scroll="" scrollable-elements=".second-level-menu">

Current Tags

  • 0.1.1                                ...           latest (6 years ago)

2 Versions

  • 0.1.1                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © |