Develop Reference

change scroll from vertical to horizontal automatically when section comes in view

I am want to create a react site where while scroll when I get to services section page should change from vertical scroll to horizontal scroll for that section. Any idea how can I achieve this?

How to get scrollbar position with Javascript?
this might help you if you got scroll position and add a condition on scroll

You can use framer-motion: https://codesandbox.io/s/framer-motion-horizontal-scroll-by-scrolling-vertically-forked-473s1?file=/src/SmoothScroll.js
Framer-motion uses "ghost" div. Height of that div is equal to the slider length, you scroll it and framer create horizontal scrolling. It also check's when your slider is in a viewport.

JavaScript - temporarily pause page scrolling but keep scrollbar scrolling until unpaused

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)

Scroll wheel doesn't always scroll page

I've recently implemented flexslider for a full screen slideshow effect.
www.ianandtaylor.com
I had to implement some hackarounds to get vertical scrolling for flexslider slide content, however the scroll wheel doesn't appear to always work when I attempt to scroll. Touch and keyboard scrolling seem just fine, but the scroll wheel is very inconsistent. Sometimes, if I go into my inspection tool and flip some CSS rule on or off for the slide element, the scrolling starts working fine (not sure why).
Ultimately, I just want to have a simple, easy scroll working on the Engagement Photos and Location & Event details slides.
Any help here would be most appreciated.

As i understand it, you want it to slide vertical when you scroll.
That can give some complications with the gallery you have, so when you
scroll it will either stop sliding when you reach the gallery or it will
just continue and disable the scrolling through gallery.

Scroll horizontal with fullPage.js, is it possible with the mouse wheel?

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.

javascript effect

i notice there's this functionality on 9gag.com. on the homepage, the 'Y u no signup' button is on the right. but as you scroll down, the button is hooked onto the header banner. how is this done?? this can be also seen on this very page whereby the yellow panel(similar Questions) on the right freeze when u scroll this page down. in facebook timeline, as you scroll down there will be a absolute div which appear on the top which contain options for timeline, now, status, photo, place and event.
r they using javascript or is this something new in html5??

when the user scrolls down the computer checks for the amount scrolled.Let's say you scroll down with 50 px .The computer checks if the scroll distance is equal or bigger than 50.
If so then it will display that new Y u no Signup?!
and then if the scroll distance is smaller than 50 the top button simply isn't displayed anymore.

No this is simple HTML, or rather CSS. Use position: fixed;. See - here. You can check my site too for example.

Here is a near duplicate question: How does economist.com implement their sticky header? jQuery?
The answer is that you use javascript to detect scrolling, and change the css of the div you want to move to position:fixed after a certain amount of scrolling.