Develop Reference

Scroll event lags in Chrome but not when dragging handlebar

I am using
#HostListener('window:scroll', ['$event'])
handleScroll(event) {
this.scrollYPos = document.body.scrollTop;
}
to get the main scrollbar scroll position when it is scrolling and I am moving a div according to the scroll location.
When I use the mouse to scroll with the scrollwheel or if I press the scrollbar arrow buttons you can see there is a delay when the div is moving into position but I want it to look like it is stuck in position.
However if I drag the scrollbar handlebar I don't see this delay and the div is stuck like it should be.
Is the scroll event different when dragging the handlebar versus scrolling with the scrollbar arrow buttons or the mousewheel? Or how fast the event is propagated?
Please note in this scenario I am not able to use absolute or fixed position.
I am testing in latest Chrome...
UPDATE
This behavior is the same on Chrome and IE. Firefox however works well no matter where I scroll.

JQuery Scrolling event fire many time

Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?

Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.

how can i stop scrolling when in the process of a swipe using hammer js?

I'm using hammerjs to allow horizontal swiping through images in a gallery , is there a way for me to stop vertical scrolling while the user is swiping horizontally?

You can add a drag handler with the drag_lock_to_axis option set to true - see the inline documention in the Hammer.js drag source code.
This should keep the drag gesture from causing vertical scrolling in the swipe area. Note that this option will cause a slight lag in vertical scrolling as it tries to determine the direction of drag. You can also use drag_block_vertical to just prevent vertical scrolling in that area all together though this is generally not desirable.

Smooth JavaScript horizontal scroll in DIV

I have content in a horizontal div that exceeds the page area so that to see all of it you have to scroll horizontally. Fine with a trackpad but for those who don't have one I want to make this obvious with the use of either scrollbars or mouseover text/image.
After hours of experiments I finally found this code - scrolling a div of images horizontally with controls - which is perfect(just changed it to mouseover).
The only problem is I want to do it smoothly and without having to repeat the mouseover or clicking.
Also I want to avoid Jquery and all that sliders stuff. I'm a very new to JS and want to keep things simple. Also I wasn't able to force a scrollbar with any CSS solutions.
Thank you

Smooth scroll div horizontally by a pixel amount, no scrollbars

I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.

It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.

I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post