How to stop user input interrupting "ScrollIntoView" whilst in progress - javascript

Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.

Related

Replace div on scroll, abort scroll, jquery or javascript

I am after a similar effect to that found here https://waaark.com/works/ - when you scroll down out of the top section, further scrolling actually replaces what is in view and no further scrolling happens. I don't want as complex animations though a simple slide in from the side is what I am after. that site is WordPress, but my site will not be.
I have tried to at least crack the slide in, but a lot of examples I have looked at and tried do not work, or don't work with multiple images - i.e. slide them all at once and don't wait for the scroll, and only slid in the first time you scroll down - want it to work every time you scroll up and down.
You could use Fullpage.js - There are a few examples for different configurations and it is very easy to setup.

How to change css styles on scroll without delay

Hi everyone,
I'm working on a side navigation menu for my churches website. You can see the demo here:
http://amightywind.com/sideNav/
However I have a problem. The navigation is supposed to work so when you scroll down the page past it's bottom the css changes to make it anchor and stop moving.
The problem is that the "anchoring" effect doesn't always work smoothly and will only be applied after you scrolled a few pixels past the bottom.
This causes the side bar to "jump" back into it's designed place.
I know this problem is probably caused by asynchronous panning (the browser delays repainting when scrolling to keep a smooth frame rate).
I was going to call this unsolvable, but then I saw firefox's quantum browser page.
If you scroll down halfway, you will see a large pink box on the left that says "Firefox Quantum features".
The text changes positioning when you scroll into it similarly to how my side bar works. However 2 things are different.
1 there is no jump. It is perfectly smooth in every browser I tested.
I figured this could easily be because they are moving a smaller portion of content than I am, but....
2 when I inspect element I notice there is no css class/style change on the object when scrolled into it.
How is this possible? Is there a way to make this effect work without Javascript? Or at least more smoothly than I've done just listening to the window scroll event?
Any help would be much appreciated thank you!

Prevent Body Element From Scrolling On Touch Devices

The Problem:
I have a web application on the iOS homescreen so there is no browser window and it looks and functions very well. I've figured out how to make inner div elements do the touch scrolling events and use the momentum/bounce style in iOS, and that works perfectly... the issue I run into now is that the bounce scrolling (again, iOS-only) is messing up any fixed elements or site-related animations I have on the page.
When I try the following:
document.ontouchmove = function(e) {e.preventDefault()};
The issue stops, but now I can't scroll anywhere on my application.
What I Need:
I want the body to be completely locked in place... If someone grabs, say, my sidebar or navbar and then pulls on the page, the body bounces! But if someone is inside the content area, there is no issue at all--the application scrolls flawlessly and looks great. If I stop scrolling on the sidebar or navbar or body, all scrolling in the application will not working and is essentially nonfunctional.
tl;dr: Body bounces on scroll. I want a scrolling content area and no scroll anywhere else. The body should NEVER move, but elements I deem scrollable within the body should.
As a sidenote, I've browser the following popular questions/solutions posted (among many others):
1
2
3
I just wanted to post that up before people assumed I didn't do any searching... I've been at this for hours now and have seen even more solutions than posted above, but I wanted to get the most popular ones listed above so no one thought this was a duplicate question.
I figured this out a few days ago and have this handy jsbin set up to demonstrate what I did to make this work:
My Working jsbin Example
When you open this link on an iPad, the text should be scrollable. Try tugging around the rest of the screen when there is no current touchmove event currently working.
If you play around with it, you'll notice that only the inner textfield moves as expected. This is determined by putting my .scrollable class within the .container class. The .scrollable class takes up the full height of it's parent container.
Now make the container a larger height, like height: 500px. The goal here is to make it large enough to have no overflow yet small enough to have other whitespace on the iPad still. Try scrolling it or pulling it... No touchmove events are fired and the screen stays in place.
My JS determines if an object has overflow after being touched. If it does, it scrolls. If it does not, it does not send a scroll event.
Play with it and let me know if I can provide any better examples and also if you run into any bugs... Right now the only one I know of is if you're really trying to break it and start tugging around the site while a current touchmove event is being fired, or the page is first loading... I wouldn't count those as "bugs", but if you can find a fix for those too, I'm all ears!

jQuery scroll takeover, scroll in sections

I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!

Create continous or neverending scrolling effect in webpage?

Here is what I am thinking:
I have long web page and when the user reaches the end, I don't want the scrolling to stop just then, but I want to reload the page again from the bottom and continue the scrolling.
Detailed
As the user scrolls to the bottom, I want the top of the website to be removed from the top and placed at the bottom in a smooth way and this effect has be vice versa also. I mean if user scrolls up at the top of the page, then the footer must load at the top and continue in this fashion.
Yes, Infinite Scroll can do this. There is also a jQuery plugin.
Now whether you should do this... that's an entirely different question. Personally I find this behaviour extremely annoying.

Categories