代码之家 › 专栏 › 技术社区 › aman

如何将窗口的Y中间设置为元素的Y中间?

jquery javascript

aman · 技术社区 · 7 年前

我创建了一个按钮,该按钮应将窗口的Y切换到“框-5” div's Y中间到 onclick . 所以换句话说,我想设置“框-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>

1 回复 | 直到 7 年前

Van 7 年前

更新了您的代码片段,如下所示。可以使用dom元素属性 offsetTop 检查其Y位置并使用 window.scroll 将视图滚动到该元素。另一个旁注,最好不要分配相同的 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

11 月前

Alex · 在轻量级中同时解构和不解构变量

11 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

user3472810 · Angular@Output/EventEmitter返回undefined

11 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

11 月前