목록에서 스크롤 위치 유지

Question

로그 파일로 채워지는 선택 목록이 있습니다. 매초 자바 스크립트는 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를 사용한다,이를 확인 :

이

<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가에 http://www.w3schools.com/html/html5_serversentevents.asp,하지만 당신은 단지 코드가 여기 어떻게 작동해야하는 경우 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>"}