Scroll Lock

Scroll Lock is a jQuery plugin that fully addresses the issue of locking mouse wheel scroll inside a given container, preventing it from propagating to parent element.

View demo

Features

• It does not change wheel scrolling speed, user experience will not be affected.

• You get the same behavior regardless of the OS mouse wheel vertical scrolling speed.

  On Windows it can be set to one screen or one line up to 100 lines per notch.

• Supports touch screens.

Install with NuGet

Install-Package jquery-scrollLock

Install with Bower

bower install jquery-scrollLock

Install with NPM

npm install jquery-scroll-lock --save

Usage

Trigger Scroll Lock via JavaScript:

$('#target').scrollLock();

Trigger Scroll Lock via Markup:

<!-- HTML -->
<div data-scrollLock
     data-strict='true'
     data-selector='.child'
     data-animation='{"top":"top locked","bottom":"bottom locked"}'
     data-keyboard='{"tabindex":0}'
     data-unblock='.inner'>
     ...
</div>

<!-- JavaScript -->
<script type="text/javascript">
  $('[data-scrollLock]').scrollLock()
</script>

Options

Remarks¹

This is pure JavaScript plugin, it does not provide any CSS. You need to implement your own!

The animation option has two keys:

{
  "top": "top locked",
  "bottom": "bottom locked"
}

When an edge is locked, the value of both animation.top + animation.bottom will be removed from the locked element's class list.

Then based on the locked edge, the value of animation.top or animation.bottom is added to the class list, and removed once the browser animationend event is fired.

Remarks²

In chrome, The following keys causes a scroll, which may propagate to parent element.

space, pageup, pagedown , end , home, up, down

The keyboard option has one key:

{ "tabindex": 0 }

The tabindex is required to be able to listen to keyboard events on none input elements, such as a div. The side effect of adding a tabindex is the browser highlight when the element is focused.

Which can be avoided via CSS outline property.

.scrollable{ outline:0; }

Remarks³

The default strictFn implementation checks if the element requires a vertical scrollbar.

strictFn = function($element){
  return $element.prop('scrollHeight') > $element.prop('clientHeight'); 
}

In previous versions (≤ v2.1.0), The check was based on scrollbar visibility, In case you require such behavior, include the following in your script:

$.fn.scrollLock.defaults.strictFn = function ($element) {
  var clientWidth = $element.prop('clientWidth'),
  offsetWidth = $element.prop('offsetWidth'),
  borderRightWidth = parseInt($element.css('border-right-width'), 10),
  borderLeftWidth = parseInt($element.css('border-left-width'), 10)
  return clientWidth + borderLeftWidth + borderRightWidth < offsetWidth
}

Methods

Events

$('#target').on('top.scrollLock', function (evt) {
  // do magic :)
})

Have a suggestion or a bug ? please open a new issue.

Commercial License

If you want to use jquery-scrollLock.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a jquery-scrollLock.js Commercial License at http://www.uplabs.com/posts/scroll-lock-plugin