Question

当我点击box1时，滚动效果需要向下滚动到box2（蓝色框的上边缘）。这在网络上运行良好，但我无法在移动设备上精确复制效果。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

您正在滚动到特定坐标（top: 507），这在移动设备上会有所不同。

使用JavaScript获取要滚动到的特定元素的top坐标：

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

如何使`window.scrollTo`更精确？

1 个答案: