Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
scroll-js
Advanced tools
Readme
A light-weight library that will allow you to scroll any html element using native javascript.
In addition to providing extra scrolling features, this library also aims to be a polyfill for the scrollTo
and scrollIntoView APIs and allows you to scroll
using animations that are based loosely on the
scrollOptions
of the DOM specification.
Manipulates native scroll properties so that native events fire appropriately and uses browser's animation frames for
fast and smooth rendering.
Many other scroller libraries use absolutely positioning, css animations, transitions and other types of workarounds directly on
the window.document
, <html>
, <body>
and other elements to "fake" a scrolling effect in order to get the scroller to behave.
While this is clever, desktop and mobile devices (mobile mainly), heavily depend on the natural scroll events of these elements to do helpful things for the user. Like hiding the location url bar as you scroll down the window of the document (on mobile browsers), for instance. Or pausing heavy processes, until the user is done performing a task as to not interrupt them, or adding inertia or natural momentum when scrolling. So it's increasingly important that the scroll logic added to these elements is done in a way that lends nicely to these use cases, which is what this library does.
async
/await
is supported)document.body
elementYou can install the library as a npm module by running the following command:
npm i scroll-js
After installing, you can either import
the component into your file:
import { scrollTo, scrollIntoView } from 'scroll-js';
Or, you can reference any of the files made available in the dist folder in your html file.
<script src="node_modules/scroll-js/dist/scroll.js"></script>
In addition to the samples below, you can find more in the examples folder.
import { scrollTo } from 'scroll-js';
scrollTo(window, { top: 500 }).then(function () {
// window has scrolled 500 pixels down the page
});
You can manually scroll any element on a page and optionally detect when done. Just make sure the element you want to scroll has:
height
css property.overflow
property that is set to hidden
.The following example scrolls the window (document body).
import { scrollTo } from 'scroll-js';
scrollTo(document.body, { top: 500 }).then(function () {
//scrolling down 500 pixels has completed!
});
import { scrollIntoView } from 'scroll-js';
var myElement = document.body.getElementsByClassName('my-element')[0];
scrollIntoView(myElement, document.body, { behavior: 'smooth' }).then(
function () {
// done scrolling document's body to show myElement
}
);
You can scroll with easing using the behavior
option of the scrollTo specification.
import { scrollTo } from 'scroll-js';
scrollTo(document.body, { top: 600, behavior: 'smooth' }).then(function () {
// scrolled down 600 pixels smoothly
});
Easing is also supported simply by passing the easing
option with an easing string that can be found in the
src/scroll.ts file.
import { scrollTo } from 'scroll-js';
scrollTo(document.body, { top: 200, easing: 'ease-in-out' }).then(function () {
// scrolled down 200 pixels, easing on beginning and end
});
Note that even though easing
option is supported by this package,
it is not guaranteed that it will be supported by the specification.
Listen in on native scroll events the same way you would if a user was scrolling with a mouse or touch event.
import { scrollTo } from 'scroll-js';
window.addEventListener('scroll', function () {
// scrolling!
});
scrollTo(document.body, { top: 300 }); // scroll to trigger event
Option | Type | Description |
---|---|---|
element | HTMLElement | The element to scroll |
options | ScrollToOptions | A set of scroll options (see writeup below) (i.e. {behavior: 'smooth', top: '20', left: '0''} ) |
The scrollTo
method allows a set of options which are synonymous with the
ScrollToOptions of the CSS specification,
but some additional ones are provided by this library until supported natively.
Option | Type | Description |
---|---|---|
behavior | String | The type of scroll behavior which can be set to auto or smooth . This is the recommended option since this is already natively supported. If this is set, all other options are ignored. |
duration | Number | The number of milliseconds the scroll will take to complete |
easing | String | The easing to use when scrolling. Only keyword values of the animation-timing-function are supported. But passing function values will eventually be supported also (ie. cubic-bezier(0.1, 0.7, 1.0, 0.1) , steps(4, end) , etc) |
Option | Type | Description |
---|---|---|
element | HTMLElement | The element to scroll into the viewport |
scroller | HTMLElement | The element to be scrolled (defaults to document.body ) |
options | ScrollIntoViewOptions | A set of scroll options to scroll the element into view (see writeup below) (i.e. {behavior: 'smooth', top: '20', left: '0''} ) |
A set of ScrollIntoViewOptions can be passed to the scrollIntoView
method.
Option | Type | Description |
---|---|---|
behavior | String | The type of scroll behavior which can be set to auto or smooth . Defaults to auto . |
Code samples showing how to use this package can be found in the examples folder. To run them, pull down this project and
npm start
Which will make the examples available at http://localhost:9383/examples/.
Run tests:
npm install
npm test
The following runs E2E tests on the files in the examples folder.
npm run test:e2e
FAQs
Light cross-browser scroller that uses native javascript
The npm package scroll-js receives a total of 7,185 weekly downloads. As such, scroll-js popularity was classified as popular.
We found that scroll-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.