0

我正在尝试使用 javascript 创建具有不同 li 的许多 ul 的 onclick 向下滚动。有些 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');andif {listitems.length > 5......并没有产生我想要的结果。我的概念在正确的轨道上吗？什么是最好的解决方案？

感谢您的任何评论！

4

1 回答 1

0

您可以尝试使用溢出 CSS 规则：

.scroll-downtop-container {
    overflow-y: scroll;
}
于 2013-07-30T21:17:54.980 回答