CSS: slide to anchor after 1 scroll - javascript

I am developing a Wordpress website and I want the following: when the user lands on the homepage and scrolls down I want the website to slide to the next section. This has to work immediatly when the user touches its mouse scroller and only then. I am able to slide to certain anchorpoints but how can I achieve this after the user only touches his mouse scroll 1 time?
This is not a duplicate of the submitted question. I want the page to scroll to a certain div or section after the user only touches his mouse scroll once. No clicking

Set a flag, and listen to a scroll event. When the scroll event triggers check if the flag is off, flip the flag if it is and then to what you need to do. If the flag is already flipped don't do anything. Easy :D

Related

Simple div movement on a timer

I have to make a simple video selector webpage for a touch display. I got the selection part working, however, I want to include a "back to main menu" button. The video plays full screen, so I want to do a static overlay button that comes up from the bottom, with the back button.
What I want to achive is this: on loading the video, the overlay is shown, then after 2-3 seconds of touch inactivity, it slides down and you can watch the video. However, if they swipe up from the bottom (or any touch event really) , the overlay comes up and they can press the back. But again, non-activity and it goes back down.

JavaScript/Vue.js: How to execute multiple methods at once before the DOM updates

Here is what I am trying to do: When the user is clicking a button, a transparent overlay is opening. The background shouldn't be scrollable but stay at the scroll position. So what I am doing at the moment is that once the button is clicked, I safe the current scroll position via window.scrollY, then add overflow: hidden to both the html and body tag (which unfortunately scrolls the page to the very top), then proceed to scroll to the saved position inside the main div of the website. In most browsers these steps aren't noticeable so it seems like everything just stays at the same position. In Safari however, you can see that for a few ms the background scrolls to the very top and then back again.
So what I would like to know is how to execute multiple methods at once before the DOM updates. Or maybe you can think of another way of doing this?
Thank you!

Javascript mouse scroll delta

is there any way to enhance scroll functionality in javascript to force it to scroll vertically to specific element when user uses mouse wheel to scroll?
just want to implement functionality like single page applications have.
Yes there is. You can listen for the wheel event, which will be triggered when the user scrolls. You can then prevent the default action to stop the window from scrolling and implement whatever you want the page to do on scroll.

Move/Slide Page To Left/Right Whe User Slide Left/Rigt With Finger On Touch Device

I wanted my webpage can change when user slide left/right using their finger on touch device (android/tablet). I found following source code that works what i need:
http://padilicious.com/code/touchevents/
But that has few limitations. It doesn't move/slide the page/element to left/right. It just change the page (href/page location). So, user don't understand whether they slide it correctly or not.
but on touch screen device like gallery you can see when user slide to left/right image move to left/right as user move the finger and it goes away left/right when user finish the slide.
i want to do something like that.
so, when user move finger my page will move with the finger too and when he remove the finger my page will go left/right with slide transition effect.
here is the sample code for page transition...
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_slide
hope that make sense..
You can use jQt to capture touch screen swipe events. After capturing these events you can easily make an application that navigates like you want. Also jQt has it's own webkit animations. And they are pretty cool.
You can also check this Safari Web Content Guide to capture these events yourself.
Another nice tutorial for detecting swipes for touch screens.

How to make "Scroll further down" button on website?

I am using wordpress' revolution slider that spans the home page. I want to put a scroll down button, so users are aware they can scroll. I want something like this one: https://exposure.so/
I tried putting a div on top of everything and a link that links to anchor link further down the page. It works, but I don't know how to make the div disappear when the user goes down, and reappear if they go back up. Anyone know how to fix this?
You need to calculate the scrollbar's handle position using javascript or jQuery.
If its towards the bottom of the page, hide the button, else show it.
To find scrollbar position : LINK

Categories