Develop Reference

image slides vertical scroll with jquery or javascript

I have 5 images and I want to slide those images when we hit the arrow up or down with keyboard button or when we move the scroll bar up or down
For reference:www.webflow.com please just check it from the link. when you will scroll down to the Buil Custom section on the page. you will see the slider and its working with when you hit the arrrow button up and down from keyboard or when you move down or up with scroll bar.

You can use https://api.jquery.com/scrollleft/ to scroll horizontal on an element.
Example: $( "div.slider" ).scrollLeft( 300 );
You will have to first compute the width of each element of your slideshow and scroll exactly that much each time.
You can do this on arrow keys with an event handler: Detecting arrow key presses in JavaScript
The reference you linked shows changes in your page based on the scroll position, reading js: change style based in scroll position might give you hints on where to start there.

HammerJS vertical swipe and VERTICAL scroll simultaneously

I have a fullpage web site on angular 5, which do pagination by vertical swipe down and up (on desctop version is listening for wheel events). On mobile I met a serious problem with non-hiding address bar because of no scrolling happens on page (page have a size of viewport). So my structure looks like this:
<div (swipeup)="fnc()" (swipedown)="fnc()">
Container handling vertical swipes and has touch-action: pan-y property
and 100vh height
<component>Container handles horizontal swipes inside components</component>
</div>
My current Hammer config:
mc.get('pinch').set({enable: false});
mc.get('rotate').set({enable: false});
mc.get('swipe').set({direction: Hammer.DIRECTION_ALL});
mc.get('pan').set({direction: Hammer.DIRECTION_ALL});
And { "touchAction": "pan-y" } seted to container which handles vertical swipes.
With this config I'm able to scroll with hiding of address bar but vertical swipe doesn't work (or it fires super rare in strange circumstances). But I want vertical swipe to fire every time when scrolling is over and not possible (when I scroll to the bottom and my address bar became hidden it should fire next swipe in the same direction).
I will be grateful for any help or advice on how to do this in different way.

new Hammer(element, {
inputClass: Hammer.TouchInput,
});
this try

Capturing horizontal swipe and blocking horizontal scrolling

I am trying to implement a slide-in menu for a responsive page, which appears when the device size is small. I used Bootstrap Simple Sidebar and added a top toolbar that appears when the screen width is small, which has a button to slide-in or slide-out the menu. All works well.
I am now trying to also trigger the event to slide in or out the menu using swipe left and swipe right gestures. I added JQuery Mobile (custom build with only events included).
The event triggers fine, my code looks something like this.
<script>
$(document).on("swiperight",function(e){
if ($('.smallscreen-toolbar').is(':visible')) {
e.preventDefault();
if (!$("#wrapper").hasClass("toggled"))
{
$("#wrapper").addClass("toggled");
}
}
});
$(document).on("swipeleft",function(e){
if ($('.smallscreen-toolbar').is(':visible')) {
e.preventDefault();
if ($("#wrapper").hasClass("toggled"))
{
$("#wrapper").removeClass("toggled");
}
}
});
</script>
The problem I have is that during the swipe left gesture (to close the menu), the page (which would be offset to the right) performs horizontal scrolling. When I tested it using Chrome's emulator I also got this error message: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted., which I presume is related.
I am trying to cancel the event using e.preventDefault(). Isn't this the right way?
How do I block horizontal scrolling events (without blocking vertical scrolling)?
I also tried to put overflow-x: hidden on the html, body and the <div> wrapping my content but when its margin is offset to the right (when the menu is visible) I can still drag it and move it around. If I bind an event to touchmove and do e.preventDefault() during it I block everything, including swipes.

Horizontal scroll by buttons

I want horizontal scrolling by buttons instead of scroll bar in my website.
For Example: http://www.entrepreneur.com/video/index.html
Here are thumbnails for videos are scrolling when left/right button at top right corner are pressed.

If i'm understanding your question correctly, You'd like to scroll a block element horizontally when a button is clicked.
EDIT: I created a JSFiddle for you to take a look at
$("#fixedSize").animate({
scrollLeft: $("#scrollAmount").val()
})
That block is what creates the scrolling effect you're looking for.
Take a look at the jquery scrollLeft.
Let me know if this helps!

Disable (not hide) main scroll bar on mouseover of an element with javascript/css?

Required behaviour: on mouseover of an element I would like to disable main browser window scrolling or at least doing so with the mousewheel. I want to keep the visibility of the scroll bars while they are disabled.
Reason: The page is approximately twice the height of the browser window. There is a div with scroll bars. When scrolling with the mouse on the div and the bottom or top of the list is hit the main window starts to scroll. This is unwanted behaviour because often the main window scroll will either move the divs content on the screen or even scroll it off the screen completely which is very annoying. I would like to be able to mouse scroll to the bottom of the div without the main window scroll taking over and then scrolling the div out of view. The reason I would like any disabled scroll bars to stay visible is because if they are hidden the width of the page stretches to fit the gap making content jump/move which is unsightly and also problematic for mouseovers.
Is this possible using javascript/css but not jquery?

using jquery you can let the page sroll to the last position you had when the mouse entered
the other scrolling zone:
var scrolltop = 0;
var handler = function(ev){$(window).scrollTop(scrolltop)};
$(element).bind("mouseover", function(ev){
scrolltop = $(window).scrollTop();
$(window).bind("scroll",handler);
});
$(element).bind("mouseout", function(ev){
$(window).unbind("scroll",handler);
});
where element is the other scrolling zone