1. element.scrollintoviewifneeded-polyfill
Polyfill for Element.scrollIntoViewIfNeeded
element.scrollintoviewifneeded-polyfill
Package: element.scrollintoviewifneeded-polyfill
Last modified: Thu, 16 Jun 2022 08:32:57 GMT
Version: 1.0.1
License: ISC
Downloads: 4,797
Repository: git+ssh://[email protected]/774297b76378566588f02538631c3137.git

Install

npm install element.scrollintoviewifneeded-polyfill
yarn add element.scrollintoviewifneeded-polyfill

element.scrollIntoViewIfNeeded Polyfill for everyone

This gist provides a simple JavaScript implementation of the non-standard WebKit method scrollIntoViewIfNeeded that can be called on DOM elements.

Install

npm install element.scrollintoviewifneeded-polyfill

Usage

Just use the code in index.js in your app or website. You can see usage in the test page test.html.

The parent element will only scroll if the element being called is out of the view. The boolean can force the element to be centered in the scrolling area.

Improvements

  • This code doesn't handle well cases where the element has position:absolute (and maybe other CSS modifications).
  • This code doesn't handle cases where the scroll area isn't the direct parent of the target element.

Kudos to the Gist of Hubert SABLONNIÈRE @hsablonniere

If you have any ideas to improve this code or if you think the WebKit implementation doesn't work like this, feel free to start a discussion...

[https://gist.github.com/hsablonniere/2581101]

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code