javascript - 如何将窗口的Y中心设置为元素的Y中心？-6ren

javascript - 如何将窗口的Y中心设置为元素的Y中心？

转载作者：行者123 更新时间：2023-12-03 00:25:46

我创建了一个按钮，它应该通过onclick将窗口的Y移动到“BOX - 5”div的 Y中间。换句话说，我想将“Box - 5”div 设置在窗口中间。我已经尝试了许多使用 window.scrollTo 和使用 elements.innerHeight/2 的方法，但我仍然无法将元素居中于窗口/屏幕的中间。请帮忙。

我希望只使用 Javascript，但如果不可能，那么我会接受 jQuery 脚本。

index.html:

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    current = 0;

for (var y=0;y<10;y++) {
    var box = document.createElement("div");
    box.id = "box";
    box.innerHTML = "Box - " + (y+1);
    content.appendChild(box);
}

document.querySelector("BUTTON").onclick = function() {
    var box_5 = document.querySelectorAll("#box")[4];
    /*
        NEED HELP HERE
    */
}

body {
    margin: 0;
}

#box {
    position: relative;
    height: 500px;
    width: 100%;
    margin: 5% auto 5% auto;
    color: black;
    background-color: skyblue;
    border: black 1px solid;
    font-size: 50px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
    <div id="content"></div>
</body>
</html>

最佳答案

更新了您的代码片段，如下所示。您可以使用 DOM 元素属性 offsetTop 检查其 Y 位置，并使用 window.scroll 将 View 滚动到该元素。另外，最好不要将相同的 id 分配给多个元素，因此我将 id 属性更改为 class 并为类名添加了标识符 _{index}。

window.onbeforeunload = function () {
    this.scrollTo(0, 0);
}

var content = document.getElementById("content"),
    current = 0;

for (var y=0;y<10;y++) {
    var box = document.createElement("div");
    box.className += "box _" + (y+1);
    box.innerHTML = "Box - " + (y+1);
    content.appendChild(box);
}

document.querySelector("BUTTON").onclick = function() {
    var box_5 = document.querySelectorAll(".box._5")[0];
    if (box_5) {
        // scroll the window view to the element
        window.scroll({
            top: box_5.offsetTop,
            behavior: 'smooth',
        }) 
    }
}

body {
    margin: 0;
}

.box {
    height: 500px;
    width: 100%;
    margin: 5% auto 5% auto;
    color: black;
    background-color: skyblue;
    border: black 1px solid;
    font-size: 50px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
    <div id="content"></div>
</body>
</html>

关于javascript - 如何将窗口的Y中心设置为元素的Y中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54102883/