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左右工作就像一个魅力。然而，似乎无法使向下滚动工作。我使用了var listitems = $('.scroll-downtop-container').getElementsByTageName ('li');和if {listitems.length > 5......这没有产生我想要的结果。我的概念是否正确？什么是最好的解决方案？

感谢您的任何评论！

Answer 1

您可以尝试使用overflow CSS rule：

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

李与不同的项目

1 个答案: