javascript - Maintain scroll position in list -

i have select list, populated logfile. every second javascript sends request server reads log file , populates list. after every request, list scrolls top. want make requests don't affect scroll can freely scroll through list.

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

maybe should use sse,check this: http://www.w3schools.com/html/html5_serversentevents.asp, if need make code works, here how:

<select id = "list" name=servers size=38 style=width:1028px>  <script type="text/javascript">  //here, new global var keep index; var old_index=-1;   window.onload = function () {  //every change on select list, register in 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, 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 not change logic here, can write using setinterval instead.   settimeout(update, updateinterval); }  update(); }  //here, function register list index function keepvalue(evt) {  old_index = evt.target.selectedindex; //or document.getelementbyid('list').selectedindex;  }  </script> 

edit:

responsetext in json format.

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