All geek questions in one place

Sync two scroll bars in multiple selection cells

Hi, I am new to javascript ....
I want to synchronize the scrolling of two selection boxes, so when I scroll down the first selection field, the scroll bar of the other selection box also scrolls ....

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

Js bin demo

+14
source

in simple javascript, you will create an event handler for a scroll event that reads the scrollTop value from the corresponding element and sets the same value for the second element.

  var s1 = document.getElementById('Select1'); var s2 = document.getElementById('Select2'); function select_scroll(e) { s2.scrollTop = s1.scrollTop; } s1.addEventListener('scroll', select_scroll, false);
+2
source

The following is very simple, and I just confirmed that it works in 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">
+2
source

the problem i am facing is .... I have two multiple select boxes. When I select an element from the first selection window, it looks at the element that responds to aggression from the second list. The only choice is good in all browser-browsers, firefox, chrome. Now, if I select the first, last item from the first selection block, the second selection flag will not scroll the last selected item in the list in the Chrome browser. Although it works fine in Internet Explorer and Firefox, but not in google chrome browser.please tell me where I am mistaken, or is this the best way to do the same.

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

Source: https://habr.com/ru/post/1305134/

More articles:


All Articles