I have a container div that holds many other div elements that are sent from the server. I have a <select> that controls the ordering of the elements. Changing this value will trigger the container to be emptied and then new content is sent from the server once again repopulating the container. To clear the container I'm just doing an jquery .empty() (after first detaching some of the elements I need to keep, and restoring those later).
The problem is that this causes the position of the select control to change position and generally move around randomly (due to changes in vertical scrolling). I like the way youtube.com works upon changing of the comment selection from "top comments" to "Newest First". It brings up a spinner and then changes the elements without causing any position or scroll changes. This is similar to what I want to achieve. Does anyone know how I can achieve this?
Note I already have overflow-y: scroll; within my body of the css.
Related
I maintain a library, react-to-print. The library provides a React component that at its core has two inputs: a trigger (usually a button), and content. When the trigger is clicked, the library will copy the entire DOM representation of the content and put it into an iframe. It will also copy all style links on the page to ensure the content is styled correctly within the iframe.
A while ago, someone raised an issue (the end of the thread explains the core problem) concerning the library's seaming inability to print content that was horizontally scrolled, in this case, within a table. It turns out that what is actually happening is that a component within the content is virtualizing its render, meaning only content this is visible on the screen is actually being rendered. So the issue is that react-to-print is not maintaining the scroll positions of child elements when it copies them into the iframe.
I know how to scroll the entire page itself inside of an iframe, but do not know how to maintain the scroll of individually scrolled DOM elements that are children of the window. Is there a way to do that?
While an ideal solution would of course be just turn on a setting or something and done, I'm guessing that, if a solution is possible, it will look something like:
Iterate over every element on the page
If the element has a scroll, save its scroll position in a map
Copy over the elements into the iframe (as is currently done)
Iterate over every element in the iframe and apply a scroll if one is found for it in the map
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.
Is it possible to make an element have fixed position, but stop it from scrolling with the page?
My problem: I am building a tooltip that I dynamically determine the placement for depending on what space is available on the page for it. It needs to pop up over everything else next to its target element and not take up space. So I initially thought position absolute.
But absolute position is based off of the element's parent wrapper. My page gets wrapped in multiple various wrappers that I have no control over (on Salesforce, but this isn't necessarily a Salesforce specific question).
So I need to position it off of the viewport instead of relying on what parent it ends up getting wrapped in. So position fixed, works great.
The only issue is position fixed has the element scroll with the page. I don't really want the tooltip to follow the user as they scroll.
I feel I need to keep the position based on the viewport due to not being able to control the parent wrappers. But all I have found is position fixed, so not sure if some method exists to stop the element from scrolling with the page.
Seems like you want to use position: absolute; instead of fixed.
If you're set on position: fixed, the only way I know of to have the element move with the rest of the page as the user scrolls is by editing the location with JavaScript when the browser scroll event fires. Otherwise, if you position with respect to the viewport at first, you'll be positioned with respect to the viewport on an ongoing basis. However, hooking into the scroll event doesn't necessarily perform well, and although there are debouncer functions available to help with that, it wouldn't be my first choice.
You may be able to use position: absolute without tangling with the extra page wrappers, however. Is there is an element (call it A) that has these properties:
your tooltip lives inside A (or can be moved there)
you can correctly position your tooltip relative to A
the extra wrappers are always outside A
If so, set position: relative on element A. Your tooltip will use A for reference and not an extra wrapper outside A (even if that wrapper also has position: relative set on it).
Is there a way to make "scrolling" inside an element completely impossible? By that, I mean the content of the element must always keep the same position relative to the element. The element in question has fixed dimensions and overflow: hidden;.
I am not talking about preventing the user to scroll inside a certain element, for example by overriding the behaviours of key presses with JavaScript. I don't think doing so would be a good idea as it's impossible to comprehensively predict all the controls of the user and their associated key-bindings. I want to entirely disable scrolling, even when not done by the user.
For example, if the element contains another element with an id attribute, accessing this id (by clicking a link with href="#the-id-in-question") would automatically cause the content to scroll so that the targeted element (the one with an id) is positioned at the top left of its parent.
Another example: if the element in which we want to disable scrolling contains interactive content, tabbing through it will again change the positioning of its content.
I have two content_editable <body> elements, that have the same exact content. I need to make one reflect the position of the other. So, if the user moves the caret down and scrolls the content, I need to make that change happen on the other element.
I tried using jQuery's scrollTop, to no avail. I've also looked at a few caret based positioning solutions, but nothing has worked yet.
A bit more background. I have a magnifier widget, that uses the css3 zoom feature to magnify content. This is done by duplicating the content via HTML and then zooming in a div on that content.
There are ckeditors in the content, which means there are iframe's with content_editable <body> tags.
When the content is duplicated, it does not preserve the position of the body's scroll. How can I get the position copied into my copied content?
PS. The only essential browser is Chrome.