滑到可视化区域方法直接滑到了最底部

Question

使用滑到可视化区域方法，页面会直接滑到最底部，不清楚是为什么？

// 输入框滑到可视区域
        if(domID == 'confirmPwd'){
          const ele = document.getElementsByClassName('confirm')[0]
          setTimeout(() => {
            ele.scrollIntoView();
          });
        }

Answer 1

引自免费微信小程序：皆我百晓生

在JavaScript中，scrollIntoView()方法会使元素滚动到浏览器视口的可见区域内。您提供的代码段中，在设置了延时后执行了ele.scrollIntoView();，这将会使得具有'confirm'类的第一个元素滑动到可视区域的顶部。

当页面直接滚动到底部时，可能的原因有以下几点：

1. CSS样式影响：确认.confirm元素或其父级元素没有设置任何会导致滚动行为异常的CSS样式，比如高度(height)、滚动位置(scrollTop)等。

2. 页面布局问题：如果.confirm元素位于页面的底部，调用scrollIntoView()时自然会使其处于可视区域的底部。

3. 选项参数缺失：scrollIntoView()方法可以接受一个可选配置对象来控制滚动行为。例如，如果您希望元素顶部与视口顶部对齐，可以这样做：

   ele.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
   

   这里指定了平滑滚动并确保元素顶部对齐视口顶部。

4. 其他脚本冲突：检查是否有其他脚本在同时操作滚动条，导致滚动位置被重置或调整至底部。

请根据实际情况排查以上可能性，并尝试修复问题。若需要元素滚动至中间或者特定位置，可以根据需求调整scrollIntoView()的参数配置。