gpt4 book ai didi

javascript - 如何使 `window.scrollTo` 更精确?

转载 作者:行者123 更新时间:2023-11-28 14:34:22 26 4
gpt4 key购买 nike

当我点击box1时,滚动效果需要向下滚动到box2(蓝色框的上边缘)。这在网络上效果很好,但我无法在移动设备上精确地复制效果。

document.getElementById('box1').addEventListener('click', function() {
window.scrollTo({
top: 507,
behavior: "smooth"
});
});
.box1 {
width: 100px;
height: 100px;
background-color: red;
}

.box2 {
width: 100px;
height: 100px;
background-color: blue;
}

.box3 {
width: 100px;
height: 100px;
background-color: green;
}

.gap {
width: 100%;
height: 400px;
background-color: yellow;
}
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>

<body>
<div class="box1" id="box1"></div>
<div class="gap"></div>
<div class="box2" id="box2"></div>
<div class="gap"></div>
<div class="box3" id="box3"></div>
</body>

当在 iPhone 模拟器中点击 box1 时,scrollTo 将我带到黄色框的下半部分。

enter image description here

最佳答案

您正在滚动到特定坐标 (top: 507),该坐标在移动设备上会有所不同。

使用 JavaScript 获取要滚动到的特定元素的顶部坐标:

var box2 = document.getElementById("box2");
document.getElementById('box1').addEventListener('click', function() {
window.scrollTo({
top: box2.getBoundingClientRect().top,
behavior: "smooth"
});
});

关于javascript - 如何使 `window.scrollTo` 更精确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50261418/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com