I have a navigation bar which becomes hidden when the user scrolls down and is shown when the user scrolls up. Similar behavior is implemented in the Headroom.js library. The logic of hiding and showing is called on the scroll event.
I also have a large table where I prepend some rows from time to time. I want this table to keep the user's view position even when the new rows are added. This is implemented as proposed in this answer.
The problem is that when I prepend some rows, scroll position changes (It is changed via setting scrollTop property to keep scrolling position unchanged) and the navigation bar is hidden. I want to hide the navigation bar only if scrolling is initiated by the user, not by the software.
Can I prevent firing scroll event when changing scrollTop property? How can I combine this two techniques - adaptive navigation bar and table which holds its viewport unchanged when the data is added?
If there is no easy way of controlling the default scroll functionality. Then You can apply condition using custom flag, when to trigger scrolling event and when to prevent it.
Check this thread for further understanding. https://stackoverflow.com/a/12763950/10664244
Related
I wasn't able to find any events to hook into for this - I want to take control over the scroll distance when the user does things like moving the mouse wheel, clicking a scroll button (up or down), clicking the empty space of a scroll bar, etc.
For example, if I have a list of things, and each row is 16px tall, how would I be able to force it to scroll 16 pixels for single scroll events (i.e. mouse wheel up/down, or clicking the scroll button, if one exists)? And then, if scrolling by clicking the empty scroll bar, how can I ensure it scrolls by a fixed amount, so when it's done scrolling, it would be perfectly aligned? The best example I can give is how it behaves in Excel. Provided you have the scroll lines to be set to 1 line in settings, scrolling up or down will move one row at a time. Clicking the empty part of the scroll bar moves down exactly to the next not-fully-visible row.
My research, up until now, indicates I'll be using the .scroll() function (at least if I'm using jQuery), but I'm completely stumped at the plan of attack, even moreso because I'm unable to find any way to differentiate between a mouse wheel scroll, button scroll, or scrollbar jump (or whatever the terms would be).
Is there also a way to restrict this in CSS, avoiding any JavaScript at all?
To achieve this, you need to use scroll-snap-type, as stated by DM in the comments.
You'd set the parent div to have scroll-snap-type: y mandatory;, and it's immediate children elements would have scroll-snap-align: top (or bottom)! This should allow rows to be viewed perfectly, provided the containing element is an appropriate size (and assuming each child element is a known fixed size).
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
I'm having issue with jumping scroll bar .I have logic to show Hide section within my form dynamically. But whenever I show sections and scroll down to last section within form and again dynamically hide first two section scroll just jump and again set to field on which I was.
Actually it is working good that setting focus again to same field where I was, but for a moment it feels like scroll jumping and again coming back due hide/show logic.I have used Ext.suspendLayouts() and Ext.resumeLayouts() within my show/hide code, but still I am seeing a small jumping moment of scroll bar. What actually I am missing ?
Add this line after you show the sections.
document.getElementById('ID of section you want to scroll to').scrollIntoView();
I have a panel that is "collapsed" by setting the wrapper div's width to be a lot smaller than the width of the content. However, when I use ctrl f to search for words, my collapsed panel gets scrolled, ie. the scrollLeft attribute of the wrapper div of the collapsed panel is no longer 0. This is a problem because I don't want it to be scrolled as it messes up the UI.
Is there a way to prevent search from automatically scrolling stuff in my collapsed panel? Some sort of event I can latch on to (focus?) so that I can reset scrollLeft to 0 whenever the browser's search is activating, or CSS I can set?
I am not using jQuery so anything jQuery related is not an option.
This is default functionality of any browser and functionality that users expect, removing this or preventing it would give developers the ability to seriously alter user experience and is generally not possible, nor a good idea.
That being said, the first suggestions I have are the following
1) set the CSS display of the object or its contents to None after fully collapsed.
2) remove the content when collapsed and store it in memory to inject back in upon opening of collapsed content.
3) upon the open of a collapsed element, set the scrollLeft to 0.
Have you tried overflow:hidden on the div?
I have a scrollbar that has to follow some timeline. It is being constantly scrolled with .scrollLeft using setInterval.
I still want the user to be able to naturally take control and just drag the scrollbar away. If I can detect the user did that, I would just turn off the setInterval timer and leave the control to the user until he explicitly turns the auto scroll back on.
Is there a way to differentiate the user scroll event, from the scroll created by .scrollLeft?
You can set a flag before changing scrollLeft and clear it afterwards, then check the flag in the scroll event.
Since Javascript is run on the UI thread, it is not possible for the user to scroll while your code is running.
One alternative is to give up using a scroll-bar at all and do it using CSS and a jQuery slider control. This also gives you the option of making it look more like a time-line. you can set the scroller elements to whatever CSS you want.
There are a few out there, but it's not too hard to roll-your-own using a jQuery draggable control and constraining one axis inside a long, narrow container DIV.