다중 선택 상자에서 두 개의 스크롤 막대를 동기화

안녕하세요 저는 자바 스크립트에 초보자입니다 ....
두 개의 선택 상자를 스크롤하여 첫 번째 선택 상자를 스크롤하면 다른 선택의 스크롤 막대 상자는 .... 스크롤 당신이 관련 요소에서 scrollTop 값을 읽어 스크롤 이벤트에 대한 이벤트 처리기를 만들고에 같은 값을 설정하는 것입니다 자바 스크립트 일반에다중 선택 상자에서 두 개의 스크롤 막대를 동기화

출처

2010-03-25 yb007

$(document).ready(function(){ 
    $('#one').scroll(function(){ 
    var length = $(this).scrollTop(); 
    $('#two').scrollTop(length); 
    }); 
});

JS Bin Demo

출처

2010-03-25 18:03:01

두 번째 요소.

는

var s1 = document.getElementById('Select1'); 
    var s2 = document.getElementById('Select2'); 

    function select_scroll(e) { 

     s2.scrollTop = s1.scrollTop; 
    } 

    s1.addEventListener('scroll', select_scroll, false);

출처

2010-03-25 20:07:51 lincolnk

내가 직면하고있는 문제는 난이 제 올라가있다 든가 하면요보기로 corrosponding 요소를 스크롤하는 제 1 선택 박스에서 요소를 선택 enabled.When 나 다중 선택 두 선택 박스가 .... 인 단일 선택은 모든 브라우저 탐색기, 파이어 폭스, 크롬에서 잘됩니다. 지금, 첫 번째 선택 상자에서 첫 번째 선택 상자의 마지막 요소를 선택하면 두 번째 선택 상자가 크롬 브라우저에서 마지막으로 선택된 요소로 스크롤되지 않습니다. 그러나 Internet Explorer 및 Firefox에서는 잘 작동하지만 Google 크롬 브라우저에서는 작동하지 않습니다. 내가 잘못한 곳이 어디인지 말해 주시고, 같은 일을하는 더 좋은 방법이 있습니까? 다음

는

<html> 
<head> 
<script language="javascript"> 
function SyncListsL(){ 
for (var i = 0; i <= [document.puser.user_select.length]-1; i++) { 
    if(document.puser.user_select.options[i].selected == true) 
    { 
     document.puser.user_select2.options[i].selected=true;  document.puser.user_select.options[i].selected=true; 
    } 
    else{ 
     document.puser.user_select2.options[i].selected = false; 
     document.puser.user_select.options[i].selected=false; 
    } 
} 
} 
function SyncListsR(){ 
for (i = 0; i <= [document.puser.user_select2.length]-1; i++) { 
    if(document.puser.user_select2.options[i].selected == true) 
    { 
document.puser.user_select.options[i].selected=true;    document.puser.user_select2.options[i].selected=true; 
     } 
    else{ 
     document.puser.user_select.options[i].selected = false; 
     document.puser.user_select2.options[i].selected=false; 
    } 
} 
} 
</script> 
<title>scrollintoview</title> 
</head> 
<body bgcolor="e2dbc5"> 
<form name="puser" > 
<table align="center"> 
    <tr> 
<td align="right" bgcolor="#eeeadd"> <font size=2> 
    <select name="user_select2" multiple size="5" onChange="SyncListsR()" style="width:35mm"> 
    <option value="a1" title="a1">a1</option> 
      <option value="a2" title="a2">a2</option> 
      <option value="ab" title="ab">ab</option> 
      <option value="abc" title="abc">abc</option> 
      <option value="e1" title="e1">e1</option>  
      <option value="e2" title="e2">e2</option> 
      <option value="new" title="new">new</option> 
      </select> 
    </font></td> 
    <td align="left" bgcolor="#eeeadd"> <font size=2> 
    <select name="user_select" multiple size="5" onChange="SyncListsL()" style="width:50mm">   
     <option value="first" title="first">first</option>   
     <option value="last" title="last">last</option>   
     <option value="ghi" title="ghi">ghi</option>   
     <option value="User" title="User">User</option>   
     <option value="ed" title="ed">ed</option> 
     <option value="edit" title="edit">edit</option> 
     <option value="second" title="second">second</option> 
     </select> 
     </font></td> 
</tr> 
</table> 
</form> 
</body> 
</html>

출처

2010-03-26 06:37:16 yb007

매우 간단하고, 난 그냥에서 작동 확인 FF 3.6

<form id=puser name=puser> 
<select name=user_select1 onclick="document.puser.user_select2.selectedIndex = this.selectedIndex"> 
<select name=user_select2 onclick="document.puser.user_select1.selectedIndex = this.selectedIndex">

출처

2010-10-01 18:55:36 Panderssen

다중 선택 상자에서 두 개의 스크롤 막대를 동기화

답변

관련 문제