Always push content down when changing a div's height without changing the page position
Question
I have a page with a div in the middle of content, whose height can change from javascript.
How can I control which way the page will scroll when the div height's changes? I want content to be always pushed down, never up.
Currently, the content is pushed down or up, depending on where the page scroll is when the button is clicked.
Here is a minimal example:
function toggle(ev) { const div = document.querySelector("div"); if (div.style.height === "336px") { div.style.height = "147px"; } else { div.style.height = "336px"; } }
body {max-width: 60em; margin: auto;}
<p style="background-color: coral; height: 400px;"></p> <div style="background-color:grey; height: 147px;"></div> <button href="#" onclick="toggle()">toggle div size</button> <p style="background-color: olive; height: 3000px;"></p>
To make things clearer, I'm looking for a solution where the top paragraph never moves when the div expands, no matter where on the window the button currently is. ie the bottom paragraph should be move up/down as well as the button.
4 answers
solution1
1 ACCPTED 2020-12-08 01:37:21
Try blurring the element (e.target.blur() on click handler) to make it inactive before updating the height of the content. Since the window no longer sees the button as active, it will no longer scroll the page to keep it in view.
const handleClick = e => {
e.target.blur()
updateScrollHeight()
}
function toggle(ev) { const div = document.querySelector("div"); ev.target.blur(); if (div.style.height === "336px") { div.style.height = "147px"; } else { div.style.height = "336px"; } } document.querySelector("button").addEventListener("click", toggle);
body {max-width: 60em; margin: auto;}
<p style="background-color: coral; height: 400px;"></p> <div style="background-color:grey; height: 147px;"></div> <button href="#">toggle div size</button> <p style="background-color: olive; height: 3000px;"></p>
solution2
0 2020-09-29 19:53:02
If I understand correctly you want to scroll at the bottom every time you set the height
function toggle(ev) {
const div = document.querySelector("div");
if (div.style.height === "336px") {
div.style.height = "147px";
} else {
div.style.height = "336px";
}
div.scrollTop = div.scrollHeight
}
solution3
0 2020-09-29 19:54:00
You can scroll to the selected element using window.scrollTo function.
<!doctype html> <style> body {max-width: 60em; margin: auto;} </style> <script> function toggle(ev) { const div = document.querySelector("div"); if (div.style.height === "336px") { div.style.height = "147px"; } else { div.style.height = "336px"; } window.scrollTo(0, div.scrollHeight); } </script> <p style="background-color: coral; height: 400px;"></p> <div style="background-color:grey; height: 147px;"></div> <button href="#" onclick="toggle()">toggle div size</button> <p style="background-color: olive; height: 3000px;"></p>
solution4
0 2020-09-29 19:54:36
The page is keeping the currently active element in view - ie the button that you clicked on - so the extra height will appear to move up or down depending on where the button is in relation to the screen.
What you want to do is to make the page look like it didn't scroll up after the element expanded. To do this we can just scroll the page back to the position it was before the element expanded - this makes it look as if the height expanded downwards.
1. Save the current position of the top of the page
var pagePosBeforeExpand = window.pageYOffset;
2. Scroll the page back to the position it was before we changed the height , if the div has been expanded:
// if we are increasing the height, then scroll to the previous top...
window.scrollTo({ top: pagePosBeforeExpand });
Note that this doesn't affect when you collapse the height again as you didn't ask for that in your question, however you could adapt this to suit in that scenario - eg you could simply move the scroll code to execute outside of the if .
Working Example:
function toggle(ev) { // 1. Save the current position of the top of the page var pagePosBeforeExpand = window.pageYOffset; const div = document.querySelector("div"); if (div.style.height === "336px") { div.style.height = "147px"; } else { div.style.height = "336px"; // 2. scroll the page back to the position it was beforewe changed the height window.scrollTo({ top: pagePosBeforeExpand }) } }
body {max-width: 60em; margin: auto;}
<p style="background-color: coral; height: 400px;"></p> <div style="background-color:grey; height: 147px;">Top of content</div> <button href="#" onclick="toggle()">toggle div size</button> <p style="background-color: olive; height: 3000px;"></p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.