I have some code using jQuery's scrollTop(0) method which is not working correctly on Chrome (Version 56.0.2924.87).
My code sets a 2 second timeout which does the following:
Scrolls to the top of the screen.
Un-hides a div which has 100% width and height and requests the user to complete some action.
Appends a class to the html tag which sets overflow: hidden.
Once users completes the action it will remove the class and hide the div so they can continue scrolling.
This is working relibaly on Firefox.
On Chrome, if the 2 second timeout executes while the user is not scrolling, then it works as expected. However, if the 2 second timeout is called while the user is in the middle of scrolling, it seems to freeze.
I have created this Plunker containing all the code. The issue does not occur if you test within the in-line demo window, you need to click on the Preview in a Separate Window (blue button top right inside the code demo).
In my demo, this is what happens if the timeout runs while I am not actively scrolling:
And this is what happens if the timeout is executed while I am scrolling down (mid-scroll):
How can I make this work reliably on Chrome even if the user is currently scrolling on the page?
Why you can not see the div when is display. When the event is called in the middle of the scrolling the scroll bar hidden and the div apper at the top of your page, but your viewport is not at the top position. If you set the div CSS position property to fixed it will work, css position. the fixed value of the position property is relative to the viewport.
So the problem is not on your jquery code.
code here
plunker
And check this:
Scrolls to the top of the screen.
Once users complete the action it will remove the class and hide the div so they can continue scrolling.
I think it will be best if they can continue at the position the wear before.
What about if you add stop(). before the .scrollTop(0)?
$('html,body,document').stop().scrollTop(0);
I am not an expert, but may be worth a shot.
Hope it helps.
Related
i am currently creating a web site and my problem is, that I have to put two DIVs on the page, that enable scrolling either one screen back or forth with a mouse click instead of the scrollbar (which is also usable) and I want them only to be visible, when there actually is something to scroll. So when the content fits into another DIV, there should not be any scroll back/forth button visible. They may take the space (or not) but I do not want them visible.
Now, I could poll the offsetWidth and scrollWidth of that other DIV with a 100ms interval, compare them and decide the visibility, but that is really ugly.
Is there some event I cloud use except resize, because that would not work on mobile/mac?
I did not find anything (yet) - neither on SO nor on the internet.
Thanks
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.
My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.
Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.
I could solve the issue myself (in some way).
I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.
Here is a JSFiddle
However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.
jQuery/javascript/css
Specifically, I'm working on some code that triggers changes when certain divs hits the window top.
I have 3 divs set that way. And the first two act as expected.
But for some reason, the 3rd div causes the window to instantly jump back up to wherever it was when I began my last scrolling action. i.e. I click the scroll bar and start dragging down, and when I hit the div, boom, the window is back to where it was when I clicked.
Is there any way I can track the code to get exactly what events are being executed? Is there an easier way than sprinkling console.log() all over my code and praying?
I wish I could step through the code at that point to see each change in state including DOM.
I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.