https://github.com/jerryjappinen/scroll-scope

Small JS plugin to keep parent elements still when scrolling an element past their boundaries
https://github.com/jerryjappinen/scroll-scope

Last synced: 16 days ago
JSON representation

Small JS plugin to keep parent elements still when scrolling an element past their boundaries

• Host: GitHub
• URL: https://github.com/jerryjappinen/scroll-scope
• Owner: jerryjappinen
• License: mit
• Created: 2015-05-30T11:41:57.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T20:12:20.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T16:29:54.664Z (about 1 month ago)
• Language: PHP
• Homepage: http://eiskis.net/scroll-scope
• Size: 175 KB
• Stars: 107
• Watchers: 6
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# *scroll-scope.js*

Small jQuery plugin to **keep parent element still when scrolling an element to its boundary**.

Commonly in scroll interaction, user hovers a mouse cursor over a scrollable element and uses trackpad or mouse wheel to scroll the element. When an element reaches its boundary, its parent element continues scrolling. Usually this means that the user will continue moving down the page when attempting to interact with an specific container. This is a common issue with dropdown menus and modal dialogs.

This behavior is most prevalent in desktop browsers. To fix this problem that shouldn't even exist, scroll-scope.js exists.

See project home and demos on [eiskis.net/scroll-scope](http://eiskis.net/scroll-scope).

## Get the plugin

Current version is *0.1.0*.

- [scroll-scope.js](https://raw.githubusercontent.com/Eiskis/scroll-scope/master/scroll-scope.js)

- [scroll-scope.min.js](https://raw.githubusercontent.com/Eiskis/scroll-scope/master/scroll-scope.min.js)

Install with Bower:

```sh

bower install scroll-scope

```

File [issues or pull requests](https://github.com/Eiskis/scroll-scope/issues) to share potential improvements. The plugin is released under MIT. Source is available on [GitHub](https://github.com/Eiskis/scroll-scope). To contribute, clone the repo, make changes in *scroll-scope.js* and build the minified version with `gulp`.

## Usage

Add the `data-scroll-scope` attribute to any scrollable element on the page:

```html





```


Include and initialize:

```html

	$(document).scrollScope();

```

The plugin works declaratively, meaning that it's attached to the document object (or any parent container you choose) instead of individual scrollable containers. This means that any DOM elements that are added or removed after page load do not need to be bound separately. You can even toggle force on and off during runtime if you please.

### Options

You can change which elements and events are targeted by setting them upon initialization. Note that having events listed here does not mean they're blocked automatically, rather the plugin listens to these events and evaluates them when encountered.

Here are the defaults:

```js

$(document).scrollScope({

	elements: '[data-scroll-scope]',

	forcedElements: '[data-scroll-scope="force"]',

	events: 'DOMMouseScroll mousewheel scroll touchstart touchmove'

});

```

### Advanced use

If you need full access to `ScrollScope` object (for example to `getTargetedElements()` or `unbind()` it later), instantiate a raw `ScrollScope` object yourself. You need to bind it to the document yourself in this case:

```js

// Create new instance

var myScrollScopeInstance = new ScrollScope({

	options: 'here'

});

// Bind to document

myScrollScopeInstance.bind(document);

// Use the object for whatever you wish

myScrollScopeInstance.mainContainer.css('background', 'blue');

myScrollScopeInstance.getTargetedElements().css('background', 'red');

// Detach from document if no longer needed

myScrollScope.unbind();

```

## Credits

Plugin by [Jerry Jäppinen](http://eiskis.net/) (under [MIT](https://github.com/Eiskis/scroll-scope/blob/master/LICENSE)).