如何制作滚动垂直div的交互式按钮？

Question

可以说我有这些div是产品和

<div class="container"> 
       <div class="product"> 
        <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div> 
        <div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div> 
        <div class="price"> 
         <span>Rs. 37,900</span> 
         <input type="button" class="btn btn-primary btn-sm" value="Details"/> 
        </div> 
       </div> 
       <div class="product"> 
        <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div> 
        <div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div> 
        <div class="price"> 
         <span>Rs. 37,900</span> 
         <input type="button" class="btn btn-primary btn-sm" value="Details"/> 
        </div> 
       </div> 
      </div> 

有2只产品因“的主要代码计算器限制”。可以说有10个这样的产品，我想显示其中5个，其余的将按照向前和向后按钮上的点击一样显示，就像facebook在查看照片时所显示的一样。

Answer 1

您可以将class='container div设置为特定高度。如果你的物品的高度是，比如说，200px，你可以将你的容器设置为400px。然后在按钮上单击可以滚动容器div。您的代码如下所示：

<script> 

function scrollOneItem(){ 
    var container = document.getElementByClassName('container'); 
    container.scrollTop = container.scrollHeight + 200; 
} 

</script> 

<button onClick="scrollOneItem()">Scroll down</button> 
<div class="container"> 
... 
</div>