{"id":19358209,"url":"https://github.com/mohammadyounes/jquery-scrolllock","last_synced_at":"2025-04-09T15:10:05.540Z","repository":{"id":15480871,"uuid":"18214455","full_name":"MohammadYounes/jquery-scrollLock","owner":"MohammadYounes","description":"Locks mouse wheel scroll inside container, preventing it from propagating to parent element","archived":false,"fork":false,"pushed_at":"2017-06-16T21:28:39.000Z","size":642,"stargazers_count":106,"open_issues_count":0,"forks_count":27,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T15:10:01.491Z","etag":null,"topics":["jquery","jquery-plugin","jquery-scrolllock","mousewheel","scroll","scroll-events","scroll-lock","scroll-plugins","scrolling"],"latest_commit_sha":null,"homepage":"http://mohammadyounes.github.io/jquery-scrollLock/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MohammadYounes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-28T14:17:48.000Z","updated_at":"2025-03-06T13:38:53.000Z","dependencies_parsed_at":"2022-07-13T23:10:30.223Z","dependency_job_id":null,"html_url":"https://github.com/MohammadYounes/jquery-scrollLock","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohammadYounes%2Fjquery-scrollLock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohammadYounes%2Fjquery-scrollLock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohammadYounes%2Fjquery-scrollLock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohammadYounes%2Fjquery-scrollLock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MohammadYounes","download_url":"https://codeload.github.com/MohammadYounes/jquery-scrollLock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055282,"owners_count":21040157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","jquery-plugin","jquery-scrolllock","mousewheel","scroll","scroll-events","scroll-lock","scroll-plugins","scrolling"],"created_at":"2024-11-10T07:10:47.382Z","updated_at":"2025-04-09T15:10:05.512Z","avatar_url":"https://github.com/MohammadYounes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub version](https://badge.fury.io/gh/MohammadYounes%2Fjquery-scrollLock.svg)](http://badge.fury.io/gh/MohammadYounes%2Fjquery-scrollLock)\n[![Bower version](https://img.shields.io/bower/v/jquery-scrollLock.svg)](https://github.com/MohammadYounes/jquery-scrollLock)\n[![NuGet version](https://img.shields.io/nuget/v/jquery-scrollLock.svg)](https://www.nuget.org/packages/jquery-scrollLock/)\n[![NPM version](https://img.shields.io/npm/v/jquery-scroll-lock.svg)](https://www.npmjs.com/package/jquery-scroll-lock/)\n\n\n\nScroll Lock\n=================\n\nScroll 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.\n\n\u003e View [demo](http://mohammadyounes.github.io/jquery-scrollLock/#demo)\n\n## Features\n\n* It does not change wheel scrolling speed, user experience will not be affected. \n* You get the same behavior regardless of the OS mouse wheel vertical scrolling speed.\n\n  \u003e On Windows it can be set to one screen or one line up to 100 lines per notch.\n* Supports touch screens.\n\n### Install with [NuGet](https://www.nuget.org/packages/jquery-scrollLock/) \n```\nInstall-Package jquery-scrollLock\n```\n\n### Install with Bower\n```\nbower install jquery-scrollLock\n```\n\n### Install with [NPM](https://www.npmjs.com/package/jquery-scroll-lock/) \n```\nnpm install jquery-scroll-lock --save\n```\n\n## Usage\n\nTrigger Scroll Lock via JavaScript: \n\n```js\n$('#target').scrollLock();\n```\n\nTrigger Scroll Lock via Markup:\n```html\n\u003c!-- HTML --\u003e\n\u003cdiv data-scrollLock\n     data-strict='true'\n     data-selector='.child'\n     data-animation='{\"top\":\"top locked\",\"bottom\":\"bottom locked\"}'\n     data-keyboard='{\"tabindex\":0}'\n     data-unblock='.inner'\u003e\n     ...\n\u003c/div\u003e\n\n\u003c!-- JavaScript --\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  $('[data-scrollLock]').scrollLock()\n\u003c/script\u003e\n```\n\n## Options\n\n|   Options |   Type     | Default    |   Description\n|:----------|:----------:|:----------:|:-------------\n| animation | `object`   | `false`    | An object defining CSS class(es) to be applied when top or bottom edge is locked. (see [remarks\u003csup\u003e1\u003c/sup\u003e](#remarks1))\n| keyboard  | `object`   | `false`    | When enabled, keys that causes scrolling will also be locked. (see [remarks\u003csup\u003e2\u003c/sup\u003e](#remarks2))\n| selector  | `string`   | `false`    | When provided, matching descendants will be locked. Useful when dealing with dynamic HTML.\n| strict    | `boolean`  | `false`    | When enabled, only elements passing the `strictFn` check will be locked.\n| strictFn  | `function` | [remarks\u003csup\u003e3\u003c/sup\u003e](#remarks3) | This function is responsible for deciding if the element should be locked or not.\n| touch     | `boolean`  | `auto`     | Indicates if an element's lock is enabled on touch screens.\n| unblock\t  | `string`   | `false`    | When provided, matching descendants scrolling will be unblocked. Useful when having a scrollable element inside a locked one.\n\n\n### Remarks\u003csup\u003e1\u003c/sup\u003e\n\n\u003e This is pure JavaScript plugin, it *does not provide any CSS*. You need to implement your own!\n\nThe `animation` option has two keys:\n\n```js\n{\n  \"top\": \"top locked\",\n  \"bottom\": \"bottom locked\"\n}\n```\n\nWhen an edge is locked, the value of both `animation.top + animation.bottom` will be removed from the locked element's class list.\n\nThen 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.\n\n### Remarks\u003csup\u003e2\u003c/sup\u003e\n\nIn chrome, The following keys causes a scroll, which may propagate to parent element.\n\n\u003ckbd\u003espace\u003c/kbd\u003e, \u003ckbd\u003epageup\u003c/kbd\u003e, \u003ckbd\u003epagedown\u003c/kbd\u003e , \u003ckbd\u003eend\u003c/kbd\u003e , \u003ckbd\u003ehome\u003c/kbd\u003e, \u003ckbd\u003eup\u003c/kbd\u003e, \u003ckbd\u003edown\u003c/kbd\u003e\n\nThe `keyboard` option has one key:\n\n```js\n{ \"tabindex\": 0 }\n```\n\nThe `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.\n\nWhich can be avoided via CSS `outline` property.\n\n```css\n.scrollable{ outline:0; }\n```\n\n### Remarks\u003csup\u003e3\u003c/sup\u003e\n\nThe default `strictFn` implementation checks if the element requires a vertical scrollbar.\n```javascript\nstrictFn = function($element){\n  return $element.prop('scrollHeight') \u003e $element.prop('clientHeight'); \n}\n```\n\u003e In previous versions (\u0026le; v2.1.0), The check was based on scrollbar visibility, In case you require such behavior, include the following in your script:\n```javascript\n$.fn.scrollLock.defaults.strictFn = function ($element) {\n  var clientWidth = $element.prop('clientWidth'),\n  offsetWidth = $element.prop('offsetWidth'),\n  borderRightWidth = parseInt($element.css('border-right-width'), 10),\n  borderLeftWidth = parseInt($element.css('border-left-width'), 10)\n  return clientWidth + borderLeftWidth + borderRightWidth \u003c offsetWidth\n}\n```\n\n## Methods\n\n|   Method                     |    Description\n|:-----------------------------|:--------------\n| `.scrollLock('enable')`      | Enables an element's Scroll Lock.\n| `.scrollLock('disable')`     | Disables an element's Scroll Lock.\n| `.scrollLock('toggleStrict')`| Toggles an element's strict option.\n| `.scrollLock('destroy')`     | Disables and destroys an element's Scroll Lock.\n\n\n## Events\n\n|   Event             |   Description\n|:--------------------|:-------------\n| `top.scrollLock`    | This event fires immediately when the top edge scroll is locked.\n| `bottom.scrollLock` | This event fires immediately when the bottom edge scroll is locked.\n\n```\n$('#target').on('top.scrollLock', function (evt) {\n  // do magic :)\n})\n```\n\n------\nHave a suggestion or a bug ? please [open a new issue.](https://github.com/MohammadYounes/jquery-scrollLock/issues?state=open)\n\n\n\n## Commercial License\n\nIf 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\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadyounes%2Fjquery-scrolllock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammadyounes%2Fjquery-scrolllock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadyounes%2Fjquery-scrolllock/lists"}