Javascript 在列表中保持滚动位置

我有一个选择列表，其中填充了我的日志文件。javascript每秒向服务器发送GET请求，服务器读取日志文件并填充列表。但是在每次GET请求之后，列表都会卷回顶部。我想做的是使请求不影响滚动，这样我就可以在列表中自由滚动

<select id = "list" name=servers size=38 style=width:1028px>

<script type="text/javascript">
window.onload = function () {

  if (bytes === undefined) {
      var bytes=0;
  }
  var url = "/test/log.php?q=";
  function httpGet(url)
  {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.onload = function (e) {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                var list = "";
                console.log(xhttp.responseText);
                obj = JSON.parse(xhttp.responseText);
                for(var key in obj) {
                list += obj[key];
                if (sessionStorage.logfile == null) {
                    sessionStorage.logfile == "Log";
                }

            }
              bytes = parseInt(list);
              document.getElementById("list").innerHTML = sessionStorage.logfile + list;
              sessionStorage.logfile += list; 
            }
        };
        xhttp.onerror = function (e) {
        console.error(xhttp.statusText);
      }
    };


    xhttp.send();
  }

  var updateInterval = 1000; 
  function update() {

    httpGet(url + bytes);
      setTimeout(update, updateInterval);
  }

  update();
}
</script>

window.onload=函数（）{
如果（字节===未定义）{
var字节=0；
}
var url=“/test/log.php？q=”；
函数httpGet（url）
{
var xhttp=newXMLHttpRequest（）；
xhttp.open（“GET”，url，true）；
xhttp.onload=函数（e）{
if（xhttp.readyState==4）{
如果（xhttp.status==200）{
var list=“”；
console.log（xhttp.responseText）；
obj=JSON.parse（xhttp.responseText）；
for（obj中的var键）{
列表+=对象[键]；
if（sessionStorage.logfile==null）{
sessionStorage.logfile==“Log”；
}
}
字节=parseInt（列表）；
document.getElementById（“list”）.innerHTML=sessionStorage.logfile+list；
sessionStorage.logfile+=列表；
}
};
xhttp.onerror=函数（e）{
控制台错误（xhttp.statusText）；
}
};
xhttp.send（）；
}
var updateInterval=1000；
函数更新（）{
httpGet（url+字节）；
setTimeout（更新，updateInterval）；
}
更新（）；
}

也许您应该使用SSE，请检查以下内容： ，但如果您只需要使代码正常工作，请参见以下方法：

<select id = "list" name=servers size=38 style=width:1028px>

<script type="text/javascript">

//here, a new global var to keep the index;
var old_index=-1;


window.onload = function () {
 //every change on select list, we register in this function..
 document.getElementById("list").onchange = keepValue;



  if (bytes === undefined) {
      var bytes=0;
  }
var url = "/test/log.php?q=";
function httpGet(url)
{
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", url, true);
  xhttp.onload = function (e) {
      if (xhttp.readyState === 4) {
          if (xhttp.status === 200) {
              var list = "";
              console.log(xhttp.responseText);
              obj = JSON.parse(xhttp.responseText);
              for(var key in obj) {
              list += obj[key];
              if (sessionStorage.logfile == null) {
                  sessionStorage.logfile == "Log";
              }

          }
            bytes = parseInt(list);
            document.getElementById("list").innerHTML = sessionStorage.logfile + list;
            sessionStorage.logfile += list;
            //here, back it to the old selected index
            //when old_index=-1, means first execution
            if (old_index==-1)
            {old_index = document.getElementById("list").length-1;}
            document.getElementById("list").selectedIndex = old_index;
          }
      };
      xhttp.onerror = function (e) {
      console.error(xhttp.statusText);
    }
  };


xhttp.send();
}

var updateInterval = 1000; 
function update() {
  httpGet(url + bytes);
  //i will not change your logic here, but you can write it using setInterval instead.
  setTimeout(update, updateInterval);
}

update();
}

//here, the function to register the list index
function keepValue(evt)
{

old_index = evt.target.selectedIndex;
//or document.getElementById('list').selectedIndex;

}

</script>

//这里，一个新的全局var来保持指数；
var old_指数=-1；
window.onload=函数（）{
//选择列表中的每一项更改，我们都在该函数中注册。。
document.getElementById（“列表”）.onchange=keepValue；
如果（字节===未定义）{
var字节=0；
}
var url=“/test/log.php？q=”；
函数httpGet（url）
{
var xhttp=newXMLHttpRequest（）；
xhttp.open（“GET”，url，true）；
xhttp.onload=函数（e）{
if（xhttp.readyState==4）{
如果（xhttp.status==200）{
var list=“”；
console.log（xhttp.responseText）；
obj=JSON.parse（xhttp.responseText）；
for（obj中的var键）{
列表+=对象[键]；
if（sessionStorage.logfile==null）{
sessionStorage.logfile==“Log”；
}
}
字节=parseInt（列表）；
document.getElementById（“list”）.innerHTML=sessionStorage.logfile+list；
sessionStorage.logfile+=列表；
//在这里，将其返回到旧的选定索引
//当old_index=-1时，表示第一次执行
如果（旧索引==-1）
{old_index=document.getElementById（“列表”）.length-1；}
document.getElementById（“列表”）。selectedIndex=旧索引；
}
};
xhttp.onerror=函数（e）{
控制台错误（xhttp.statusText）；
}
};
xhttp.send（）；
}
var updateInterval=1000；
函数更新（）{
httpGet（url+字节）；
//我不会在这里更改您的逻辑，但是您可以使用setInterval来编写它。
setTimeout（更新，updateInterval）；
}
更新（）；
}
//这里是注册列表索引的函数
函数keepValue（evt）
{
旧索引=evt.target.selectedIndex；
//或document.getElementById（'list'）。选择索引；
}

编辑：

ResponseText是JSON格式的

{"key":"2186 <option>   18:42:19.716 7963       [DEBUG main() cnet.cpp:167]  Using public ip: 192.168.0.107 </option>
<option>   18:42:19.716 7963       [DEBUG main() cnet.cpp:168]  Using local ip: 192.168.0.107 </option>
<option>   18:42:19.717 7963       [DEBUG init() redis.cpp:75]  Initializing redis client application </option>"}

{“key”：“218618:42:19.7167963[DEBUG main（）cnet.cpp:167]使用公共ip:192.168.0.107
18:42:19.716 7963[DEBUG main（）cnet.cpp:168]使用本地ip:192.168.0.107
18:42:19.717 7963[DEBUG init（）redis.cpp:75]初始化redis客户端应用程序“}

刷新列表和设置时始终获取选定键。选项[key]。刷新后选择。@GovindSamrow您可以更具体一点吗？您正在替换整个列表，为了保持滚动位置，您应该更新列表中元素的值。您能否发布一个典型的ajax响应，以便我们查看您使用的格式？为了帮助您解决问题，您是否可以编辑问题并添加响应文本？我更新了答案，只需删除.childNodes[0]。正如我所看到的，元素（“list”）已经是一个select标记。检查问题是否已解决。新建编辑：我忘记了“onchange”事件。代码编辑；你现在能帮我把第一项选成最后一项吗？所以当我加载页面时，它会自动滚动到底部，除非我选择其他内容？