jquery - li 与不同的元素

Question

我正在尝试使用 javascript 创建 onclick 向下滚动，其中包含许多具有不同 li 的 ul。有些 ul 需要向下滚动，但有些不需要。

<div id="background-container">
  <div id="button-right">
  </div>
  <div id="button-left">
  </div>
  <div id="button-down">
  </div>
  <div class="scroll-leftright-container">
     <ul class="scroll-downtop-container">    <-------cant scroll down
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
     </ul>
     <ul class="scroll-downtop-container">    <-------want to scroll down
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
     </ul>
     <ul class="scroll-downtop-container">    <-------cant scroll down
         <li>items</li>
         <li>items</li>
         <li>items</li>
         <li>items</li>
     </ul>
  </div>
  </div>
</div>

实现这一目标的当前 javascript 是

$(document).ready(function () {
  var $item = $('.scroll-leftright-container');
  var currentitem = parseInt ($item.css('width');
  var framewidth = 160;
  var maxright = (currentitem/framewidth - 1)/2;
  var maxleft = 0 - (currentitem/framewidth - 1)/2;
  var countside = 0;
$('div#button-left').click(function(){
  if (countside > maxleft){
       $item.animate({'left' : '+=160px'}, 'fast');
       countside= countside -1
     }
     else{return;}
  });
$('div#button-right').click(function(){
  if (countside > maxright){
       $item.animate({'left' : '-=160px'}, 'fast');
       countside= countside +1
     }
     else{return;}
  });
});
});

目前 onclick left 和 right 非常有效。但是，似乎无法使向下滚动工作。我使用了 var listitems = $('.scroll-downtop-container').getElementsByTageName ('li'); 和 if {listitems.length > 5 ...... 没有产生我想要的结果。我的想法是否正确？什么是最佳解决方案？

感谢您的任何评论!

Answer 1

您可以尝试使用 overflow CSS rule :

.scroll-downtop-container {
    overflow-y: scroll;
}