Scroll event lags in Chrome but not when dragging handlebar - javascript

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.

Related

Adding a functional Scrollbar to a ListView for users who don't like touch scrolling

I have a requirement to add a scroll bar that is always visible and which can be directly used by mouse or touch to scroll the contents of a large ListView.
The normal way of scrolling on mobile devices is by swiping up or down. During the scroll process there will be a small scrollbar visible but that scrollbar disappears and even while visible it can't be used to do any actual scrolling.
After much searching I could not find what I needed.
So my question is: Is there a way to make the scrollbar in the ListView fully usable or should I disable it and create a separate scrollbar which I will need to keep in sync. If so how?
For a functional example of something I would be working with see: https://fiddle.sencha.com/#fiddle/124j

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.

jQuery: The scrollbar sticks when i click it, causing it to scroll when my mouse isn't down. (with jsfiddle example)

http://jsfiddle.net/nicktheandroid/7raYa/9/
My script allows me to scroll the page like a PDF, allowing you to grab the page and drag down or up. My problem, is that when i use the scrollbar, then mouseup from the scroll bar, the scrollbar will stick and scroll with my mouse up and down, even though my mouse is up. So when clicking on the scrollbar, its like i never moused up. how do I fix this?
THANKS!
I believe the scrollbar is part of the page, so when you click it, it makes your script believe the mouse is down - you'll notice that after you mouseup from clicking on the scrollbar that the page continues to move up and down until you click. Try to grab the coordinates of the mouse on mouse down, and make sure that the click occurred inside of the page (minus the scrollbar)
Edit: I was correct - here is the updated jsFiddle with it working: http://jsfiddle.net/xDtVL/

Horizontal Scrolling

I am working on a site that displays pictures accross the Y axis of the browser and spans about 12500px wide.
I am using the Hortizontal way as a base but I have just realized that the horizontal scrolling with both the arrows and the mouse's wheel does not work in both safari and chrome.
http://www.thehorizontalway.com/
Is there any way, preferably with Jquery, that I can do either:
a) place arrows that will scroll the window left to right upon clicking/hovering?
b) convert the users mouse's wheel scroll into a horizontal scroll?
Thanks a lot.
You can programmatically scroll the window up, down, left or right using window.scrollTo or window.scrollBy. Put these into the click or mouseover event handlers on whatever you want and it should do as you wish.
I think this will help you...
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
You can increase the width to become your full width and position buttons absolutely e.t.c

Categories

Resources