I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
Related
Using the IntersectionObserver you can detect if an element has scrolled into viewport, but is is possible to detect if the viewport itself has scrolled a certain number of px from the top?
What I'm trying to do:
I have an infinite scroll set up using IntersectionObserver which works fine. But I want to show a fixed positioned Scroll back to top button in the lower bottom/right corner of viewport — but I only want to show that if the user scrolls, say 200-300px from the top.
Somewhat late to the party but you can use intersection observer quite easily for this. You observe an element above the fold as it goes out of view change the 'scroll back to top' state. Easy as pie. This is way more efficient that messing with scroll events as it can block the main thread. MDN docs go into more depth.
I currently have a really great vanilla JS script in place that smooths out the page scroll when the user is scrolling with the mousewheel. (Original script grabbed from here https://stackoverflow.com/a/47206289/9817996)
After adding a scroll to top link using
Scroll to top for simplicity, I have come across an issue where when this link is clicked, the page scrolls to the top then bounces right back to where it was.
Here is a Codepen showcasing the issue: https://codepen.io/kiaramelissa/pen/zYrYbbj
I have also tried creating a scroll to top button using Javascript but it does the exact same thing. I was wondering if anyone could assist with figuring out what is causing this?
I would ideally like to keep my smooth scroll as vanilla JS and not utilise any bulky plugins. Thanks in advance for any ideas!
This code works only when scrolling with the mouse wheel. But there is a problem with it.
update() function is constantly being called when scrolling down (up works ok). This is because moving is always true (delta always > 0.5).
if (Math.abs(delta) > 0.5)
If you put a console.log there you will see it for yourself.
I can't actually understand why the 0.5 is selected as a value, but if you make it 1 it will work for both scroll up and scroll down.
To further see my point, if you leave it as it is (0.5), and try to just scroll a little bit up after you scroll all the way down, you will see that the button works without bouncing back down.
After you make it 1, smooth scroll continues to work for both directions, and when the button is pressed, it stays up.
BUT the scroll to top (with the button) is not smooth! That is expected because your js code only works for mousewheel event, not with the # you used.
Let me just say that if your intention is to have smooth scroll when you press the button, and don't care about the mousewheel, then you will be better off with something like this:
css scroll-behavior or like this javascript scroll anchor without the need of your existing code.
If you want to keep the smooth scrolling when mousewheel is used, then you should use the javascript method from the above link, along side your existing code.
Also one more thing: If you press the button, before the scroll finishes (while easing out) it will jump to top and then it will bounce back where it was. That's expected, as js scroll code doesn't know anything about the button scroll behavior.
On http://www.beargrylls.com/ its intro stops the normal scrolling on the page but uses the scroll event to do effects.
How do you:
Stop the scrolling effect on the page without an overflow:hidden css rule
How do you do #1 while still taking in scrolling offset values (I'm assuming this is what is being done).
Thanks.
I am using fullPage.js for a one pager website. It works beautifully. It has support for scrolling through full page slides at the flick of the scroll wheel, and each slide can also contain a horizontal slideshow, normally triggered at that point by clicking one of the side arrows.
I want to force the user to scroll through that slideshow before they can progress down to the next slide. Does anyone know of a way to allow the slideshow to be triggered with the mouse wheel when scrolling down? Then when it hits the end of that slideshow it scrolls vertical again to the next slide?
You can do it with jquery.mousewheel like:
$('#fullpage').on('mousewheel', function(event) {
if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
else{$.fn.fullpage.moveSlideLeft();}
});
https://github.com/jquery/jquery-mousewheel
Update 2016
Now fullPage.js provides the Scroll Horizontally extension for it.
What you want to accomplish is not that simple to implement in the plugin. Also, I would say forcing the user to follow a path is not consider as a good practice from the user experience point of view.
Also, what should happen once the user reach the next section and then scrolls up? Should he follow all the way back throw the slides of the previous section again in order to keep moving up ?
Anyway, if you want to accomplish it by your own, you would need first of all, to avoid the auto scrolling behavior when scrolling withing your slides (or the section slides for which you want to apply this).
And then, you would need to change the scrolling behavior to trigger the action to go to the next or to the previous slide by triggering the control arrows events depending on the scrolling direction.
Once the end of the slider is reached, you would need to add again the auto scrolling even.
It really doesn't sound simple if you want to do it by your own. You would need to recode the plugin.
I am building an infinite scroll component for a web page that needs to work on iPad.
So - when the user scrolls to the bottom of a list, we load more content and display an animated ajax loader image while it's loading.
I have managed to get this to work to a point by using the touchmove event to measure page scroll position and load content when required. But - when we are scrolling the page, any animated gifs (or css animated icons) stop animating (presumably to reduce load on the gpu).
I have however found a way around this - if I create an element with overflow:scroll on it, I can put all my contents in that and emply the same method of measuring position on touchmove but the animated gifs still continue to animate and I can run javascript functions in the background as well.
But - I also want the scrolling region to have the standard iOS momentum/inertia slow down after scrolling. I have managed to achieve this by applying -webkit-overflow-scrolling: touch to the scroll region.
So - to my question - when I release the scroll element and it gradually slows down, I would like to measure the position of the scrolled element as it auto slows down (if that makes sense). I can measure it as I scroll through the use of the "touchmove" event and I can measure it when the momentum comes to a halt but not during the momentum/slow-down bit.
I can run javascript loops/intervals while it is happening but it seems impossible to acually measure the scroll position of the element as it gradually slows down.
Any ideas?
Thanks