如何使用左鍵，右鍵和空格鍵實現兩個ul列表之間的獨立水平滾動？

如何使用左鍵，右鍵和空格鍵在兩個ul列表之間實現獨立的水平滾動？我可以在加載滾動瀏覽文檔，但listA的需要一種方法來從listA的如何使用左鍵，右鍵和空格鍵實現兩個ul列表之間的獨立水平滾動？

<HTML> 
    <HEAD> 
    <TITLE>Layout Example</TITLE> 
    <SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("#containerA ul li:first").addClass("highlight"); 
     $("#containerB ul li:first").addClass("highlight"); 

       $(document).keydown(function(e) 
       {       
        if(e.which == 37) 
        {  
          $("#containerA ul li.highlight").removeClass("highlight").prev().addClass("highlight"); 

        }else if(e.which == 39 || e.which == 32) 
        { 

          $("#containerA ul li.highlight").removeClass("highlight").next().addClass("highlight"); 
        } 
       }); 


}); 
</script> 
<style> 
.highlight 
{ 
    background-color: blue; 
    color: white; 
} 
#containerA, #containerB 
{ 
    height: 100px; 
    width: 999px; 
    background-color: black; 
    color: white; 
    text-align: center; 
    position: relative; 
    border: 5px solid blue; 
    padding: 5px; 
} 
ul 
{ 
    list-style-type: none; 
    margin: 0px; 
    padding: 5px; 
    line-height: 2; 
    margin-top: 15px; 
    margin-left: 20px; 
    margin-right: auto;  
} 
li 
{ 
    background-color: gray; 
    width: 100px; 
    float: left; 
    margin-right: 4px; 
    margin-top: 3px; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="containerA"> List A 
    <ul id="listA"> 
       <li>aaaaaaaaa </li> 
       <li>bbbbbbbbb </li> 
       <li>ccccccccc </li> 
       <li>ddddddddd </li> 
       <li>eeeeeeeee </li> 
       <li>fffffffff </li> 
       <li>ggggggggg </li> 
       <li>hhhhhhhhh </li> 
       <li>iiiiiiiii </li> 
    </ul> 
</div> 
<div id="containerB"> List B 
    <ul id="listB"> 
       <li>aaaaaaaaa </li> 
       <li>bbbbbbbbb </li> 
       <li>ccccccccc </li> 
       <li>ddddddddd </li> 
       <li>eeeeeeeee </li> 
       <li>fffffffff </li> 
       <li>ggggggggg </li> 
       <li>hhhhhhhhh </li> 
       <li>iiiiiiiii </li> 
    </ul> 
</div> 
</BODY> 
</HTML>

來源

2011-12-08 Yetimwork Beyene

獨立滾動數組listB這是地方類是非常有用的一個很好的例子。你可以添加一個活躍的類到最後一次點擊的列表中，然後將它定位到你的移動。

http://jsfiddle.net/mmTra/

//on click activate list 
$('.listcontainer').click(function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

//target active container for highlighting 
$("div.active ul li.highlight").removeClass("highlight").prev().addClass("highlight");

來源

2011-12-08 19:08:55 mrtsherman

超級感謝Mrtsherman理解我的問題，並提供了一個可行的解決方案。 –

如何使用左鍵，右鍵和空格鍵實現兩個ul列表之間的獨立水平滾動？

回答

相關問題