I have a div containing around 20 little divs inside, so that when you click on one, the big div is scrolled to center the small one; then its margins are increased. Problem is, when the margins are increased, the small div is pushed downwards, because the scroll position stays in the same place. I can fire another event to compensate the movement, but it doesn't look pretty, there's race conditions and the effects are no exact opposites.
Is there a way to keep the div centered in the scroll and then push the neighbors away from it?
Related
I have a div with long simple text, that user will scroll. I want to put a small div in a corner (overlap main div and sticky with absolute position) that will be exact same copy of big div, main purpose so that smaller div copy scroll position at least, so same text visible in both div's.
if its important - user wont use smaller div, its more like pip(picture in picture), like a preview.
Im curious if there is a way to make this simple way or i will need to think how to do it like two tabs solution
There are a lot of pdf pages that is wrapped by div in a page. When they were zoomed by increasing div's width and height, scrollbar lose its position.
How can I fix it like this example?
As you see in the example, when you zoom anywhere in the page, scrollbar didn't lose its position and it acts as a sticky.
What is your suggestion?
Quick question here:
will $(this).scrollTop() value be equivalent on every screen when the bottom of a fixed position div meets the bottom of an adjacent relative positioned div (a div scrolling upward with the rest of the screen)?
Getting the scroll position when a fixed point meets a scrolling point is a bit of trial an error. It would be good to know if that value is good for javascript on every device.
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.
Let's say I have two divs on a page like this:
<div style="width:300px;height:100px;overflow:hidden">
<div style="width:3000px;height:100px">
some content
</div>
</div>
and let's assume that the outer div is positioned somewhere in the middle of the page.
Is there a possibility to "map" the global document scrollbar to that div so it's possible to use the mouse's / trackpad's horizontal scrolling feature to move that inner div to left and right?
I hope it's clear what I am trying to do...
I'm not sure it's possible to re-map the scrollbar's effected area. However, you might be able to achieve the same visual effect by making a fixed position div (position:fixed;), and keeping it on top of the one that needs to scroll left and right. You'd have to make the two divs siblings instead of parent>child, which hopefully isn't a deal-breaker.
This way, the page's scrollbar would effect the 'child' div just as it normally would, while allowing the other one to remain locked in place.
Hope this helps