在列表中维护滚动位置

Question

我有一个选择列表，里面填充了我的日志文件。每秒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> 

Answer 1

也许你应该使用SSE，检查： http://www.w3schools.com/html/html5_serversentevents.asp，但如果你只是需要做的代码工作，这里是如何：

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

编辑：

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