npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-scroll-lock

v3.1.3

Published

Locks mouse wheel scroll inside container, preventing it from propagating to parent element

Downloads

7,668

Readme

GitHub version Bower version NuGet version NPM version

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

| Options | Type | Default | Description |:----------|:----------:|:----------:|:------------- | animation | object | false | An object defining CSS class(es) to be applied when top or bottom edge is locked. (see remarks1) | keyboard | object | false | When enabled, keys that causes scrolling will also be locked. (see remarks2) | selector | string | false | When provided, matching descendants will be locked. Useful when dealing with dynamic HTML. | strict | boolean | false | When enabled, only elements passing the strictFn check will be locked. | strictFn | function | remarks3 | This function is responsible for deciding if the element should be locked or not. | touch | boolean | auto | Indicates if an element's lock is enabled on touch screens. | unblock | string | false | When provided, matching descendants scrolling will be unblocked. Useful when having a scrollable element inside a locked one.

Remarks1

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.

Remarks2

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; }

Remarks3

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

| Method | Description |:-----------------------------|:-------------- | .scrollLock('enable') | Enables an element's Scroll Lock. | .scrollLock('disable') | Disables an element's Scroll Lock. | .scrollLock('toggleStrict')| Toggles an element's strict option. | .scrollLock('destroy') | Disables and destroys an element's Scroll Lock.

Events

| Event | Description |:--------------------|:------------- | top.scrollLock | This event fires immediately when the top edge scroll is locked. | bottom.scrollLock | This event fires immediately when the bottom edge scroll is locked.

$('#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