markcellus / scroll-js Goto Github PK

I am using Isotope2 and Scroll-JS on a project. There's a number of grid items in a Masonry layout. When a user clicks on a grid item it expands to full width and I want this item to scroll to the top of the viewport. My problem is that instead of scrolling from the current position within the page, the scroll starts from the top of the page. I've made a simplified case study in Codepen.

Not sure where you put in the docs to see all the easing options

It would be great to have a method to call to forcibly cancel a scroll that has already been initiated using scroll-js. This way, if a user starts manually scrolling or performs a pointer/touch event during the scroll, I can cancel the scroll to freeze the frame at the time they trigger that event.

This would be similar to the cancelScroll method from @cferdinandi's smooth-scroll package.

How can I stop scrolling behavior immediately during the animation ?

instant has been removed from the spec in favor of auto.

Hi,

I find the behavior option a little confusing, maybe it would be convenient to describe the difference between auto and smooth, which is (according to the draft):

• auto: The scrolling box is scrolled in an instant fashion.
• smooth: The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

Regarding the code:

https://github.com/mkay581/scroll-js/blob/e3063f824f1925b386b3fc2a0a59d2abb656e2a4/src/scroll.ts#L136-L143

It looks like it is not draft compliant (or maybe I'm wrong 😅). But I have no idea on how to retrieve this info from the user agent.

For me the current implementation is completely okay, but I am missing a little bit of explanation at the README.

What is your opinion @mkay581? Should I submit a PR adding this explanation to the README?

Thanks!

When scrolling to an element with a fixed header, you'd need to have an option to specify an offset. The offset may vary between viewports or can be expanding once you scroll up, so it should also support a callback function.

I am using Brunch.io to pack all the code together, and when installing this via npm, I get the following error:

20 Jul 17:01:47 - error: undefined of node_modules/scroll-js/src/scroll.js failed. rror: 'import' and 'export' may only appear at the top level (6:0)

I have no idea what's causing this, and I've never come across this before.

If I can provide any information you need, please ask.

Support block and inline as per spec's ScrollIntoViewOptions

scrollIntoView(element, {block: "end", inline: "nearest"});

The user can not use the browser internal scroll function while the script running in chrome 50.0.2661.102 m.

Install it on next js will work like development mode.

Cannot find module 'core-js/modules/es.object.to-string.js' Require stack: - /app/node_modules/scroll-js/dist/scroll.common.j

scrollIntoView(element, {top: -60});

Usually, Some scenarios have a sticky dom, and we wanna offset a distance.

This block of code is throwing not a function:

     if (!container.contains(el)) {
                errorMsg = 'Scroll.toElement() was passed an element that does not exist inside the scroll container';
                console.warn(errorMsg);
                return Promise.reject(new Error(errorMsg));
            }

Is there a way to instantly scroll, without an animation/transition? Currently have this:

      scroll.toElement(element, { duration: 0 });

But doesn't seem to work. 👎

I'm not able to get this working in IE. I'm getting this error:

SCRIPT5007: Object expected

It looks like IE is still expecting domElement.scrollIntoView instead of scrollIntoView(domElement...

https://github.com/markcellus/scroll-js/blob/master/package.json#L30

This is a client package, and it doesn't make any sense for this line to exist. If this was meant for development usage, then please move to something like .nvmrc. The engine field blocks the installation of the package in projects with node versions older than v16 for no reason.

Expected Behaviour

Scroll.toElement starts scrolling at current position

Actual Behaviour

On Chrome and Firefox the scroll position is reset to the top and starts there.

Usage

const element = document.getElementById(id);
const scroll = new Scroll(document.body);
scroll.toElement(element)

Details

This is most likely related to the weird fact that document.body.scrollTop is always 0 on Chrome and Firefox

Hacky fix

This works for us:

const element = document.getElementById(id);
const scroll = new Scroll(document.documentElement.scrollTop > 0 ? document.documentElement : document.body);
scroll.toElement(element)

Notice: I know this will use document.body when the page is not scrolled. This prevents you from initializing the scroll object only once.

This duplicates #25 - sorry

Not really an issue, sorry.

I am looking for a native script that can manage scrolling and stopping at specific points along the page, like screens.

We have each section full height, and the scroll behaviour is required to stop at the edge of each section.

Can this be done with this script?

Hi, when I try to import your module

import { scrollTo, scrollIntoView } from 'scroll-js';

I get the following error:

Cannot find module core-js/modules/es.object.to-string.js imported from ./node_modules/scroll-js/dist/scroll.common.js

I have no idea what this could mean... Any idea how I could get this to work?
Thank you in advance.

PS: I am using Vite with SvelteKit if that‘s of any help

Hey,

Does this package supports IE11? I have tried it today but can't make it work on IE11 due to an error. SCRIPT1006: Expected ')'
Not sure if it's my webpack setup breaking stuff or it just doesn't work currently on IE.

Thanks

Just wanna let you know that I tried to use scroll-js via NPM yesterday, but was shocked to wait for 240 secs till about 3 hundred dependencies get installed. Maybe Bower package is not so heavy, but Bower is no being abandoned.
Are all those babel dependencies necessary? All I really need is one JS file. I believe the library works great, at least as I read the description, but the collateral damage of having about 300 deps installed is no for me.

Vertical scroll is nice but what about horizontal scroll?

@markcellus, thanks for creating such a versatile package to handle more complex and programmatic scrolling needs.

Would you consider adding a scrollBy method that accounts for the current scroll offset of the target, similar to how the browser's built-in APIs offer both scrollTo and scrollBy methods?

• scrollTo (MDN docs)
• scrollBy (MDN docs)

Thanks!