Edge IE兼容模式下AJAX刷新表格后如何仅滚动目标元素到指定Y位置

解决方案 #

你需要直接操作表格滚动容器的scrollTop属性，而不是调用全局的document.scrollTo方法，scrollTop属性在IE11兼容模式下完全可用，无需额外兼容处理。

核心修改点 #

把AJAX回调里的

document.scrollTo(0,yElmnt);

替换为：

document.getElementById("scrollPicks").scrollTop = yElmnt;

修改后完整代码 #

function ShowPicks(){
  var elmnt = ""
  var yElmnt = 0

  if (document.getElementById("scrollPicks")) {
    elmnt = document.getElementById("scrollPicks");
    yElmnt = elmnt.scrollTop;
  }

  if (window.XMLHttpRequest) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("AutoPickDiv").innerHTML = this.responseText;
        var newScrollElmnt = document.getElementById("scrollPicks");
        if (newScrollElmnt) {
          // 直接给滚动容器的scrollTop赋值即可实现容器内滚动
          newScrollElmnt.scrollTop = yElmnt;
          // 若遇到偶发滚动失效，可替换为下面的延迟执行代码
          // setTimeout(function() {
          //   newScrollElmnt.scrollTop = yElmnt;
          // }, 10);
        }
      }  
    }
  }
  var RandNbr = Math.round(Math.random()*10000000);
  xmlhttp.open("POST", "TPicks.asp", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("rand=" + RandNbr);
}

补充说明 #

• 如果刷新后表格内容高度和刷新前不一致，可能导致滚动位置看起来有偏差，属于正常业务逻辑问题，和滚动操作本身无关
• 代码中注释的延迟执行方案是为了兼容部分极端场景下浏览器DOM渲染未完成就执行滚动操作导致的失效，默认场景不需要开启

内容的提问来源于stack exchange，提问作者mikeholli