如何製作滾動垂直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>