All Projects → MohammadYounes → Jquery Scrolllock

MohammadYounes / Jquery Scrolllock

Licence: gpl-3.0
Locks mouse wheel scroll inside container, preventing it from propagating to parent element

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Jquery Scrolllock

NoobScroll
A lightweight jQuery Plugin that add some cool function to make scrolling more fun [Archive]
Stars: ✭ 43 (-60.55%)
Mutual labels:  jquery-plugin, scrolling, scroll
Footer Reveal
A jQuery plugin for easy implementation of the 'fixed/reveal' footer effect. Demo here:
Stars: ✭ 111 (+1.83%)
Mutual labels:  jquery-plugin, scroll, jquery
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✭ 708 (+549.54%)
Mutual labels:  jquery-plugin, scrolling, jquery
Sticky Sidebar
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
Stars: ✭ 2,057 (+1787.16%)
Mutual labels:  jquery-plugin, scrolling, jquery
Hc Sticky
JavaScript library that makes any element on your page visible while you scroll.
Stars: ✭ 375 (+244.04%)
Mutual labels:  jquery-plugin, scroll, jquery
Paroller.js
Parallax scrolling jQuery plugin
Stars: ✭ 535 (+390.83%)
Mutual labels:  jquery-plugin, scrolling, jquery
Jquery Lockfixed
jQuery lockfixed plugin
Stars: ✭ 69 (-36.7%)
Mutual labels:  jquery-plugin, scrolling, jquery
Popup Maker
Popup Maker plugin for WordPress
Stars: ✭ 87 (-20.18%)
Mutual labels:  jquery-plugin, jquery
Multipicker
Form styling plugin for jQuery
Stars: ✭ 90 (-17.43%)
Mutual labels:  jquery-plugin, jquery
Ax5ui Grid
Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
Stars: ✭ 102 (-6.42%)
Mutual labels:  jquery-plugin, jquery
Basictable
Basic Table jQuery or Vanilla JS plugin for simple responsive tables.
Stars: ✭ 94 (-13.76%)
Mutual labels:  jquery-plugin, jquery
Imgnotes
Extension of the jQuery imgViewer plugin to add markers and notes to the image
Stars: ✭ 98 (-10.09%)
Mutual labels:  jquery-plugin, jquery
Tui.calendar
🍞📅A JavaScript calendar that has everything you need.
Stars: ✭ 9,537 (+8649.54%)
Mutual labels:  jquery-plugin, jquery
Jquery Udraggable
make elements draggable by mouse or touch
Stars: ✭ 107 (-1.83%)
Mutual labels:  jquery-plugin, jquery
Jquery Mosaic
A jQuery plugin to build responsive mosaics of images or any other content fitted to match heights in multiple rows while maintaining aspect ratios. http://jquery-mosaic.tin.cat
Stars: ✭ 80 (-26.61%)
Mutual labels:  jquery-plugin, jquery
Translucent
Translucent plastic card theme.
Stars: ✭ 93 (-14.68%)
Mutual labels:  jquery-plugin, jquery
Applozic Web Plugin
Javascript (jQuery) Real Time Chat & Messaging plugin
Stars: ✭ 76 (-30.28%)
Mutual labels:  jquery-plugin, jquery
Gdb
Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use 2 way data binder. GDB binds views and models in realtime with live two-way binding and no hefty framework necessary.
Stars: ✭ 90 (-17.43%)
Mutual labels:  jquery-plugin, jquery
Ihavecookies
jQuery plugin to display cookie consent message (EU regulation)
Stars: ✭ 106 (-2.75%)
Mutual labels:  jquery-plugin, jquery
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-7.34%)
Mutual labels:  scroll, scrolling

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].