滾動div，自動調整高度和位置

我需要在div中滾動內容塊，我需要在每個塊之間有相等的空間，但我無法真正預測每個塊的高度將完全相同，有些可能會有四條線，有些可能有三條。然而，讓我的滾輪工作的唯一方法是爲每個塊分配一個特定的高度和位置。如果行數（因此塊的高度）變化，是否有辦法達到相同的結果？滾動div，自動調整高度和位置

這裏是我的JSFIDDLE

HTML

<div class="container"> 
    <div class="block block-1">1</div> 
    <div class="block block-2">2</div> 
    <div class="block block-3">3</div> 
    <div class="block block-4">4</div> 
    <div class="block block-5">5</div> 
    <div class="block block-6">6</div> 
</div> 
<button id="prev">Previous</button> 
<button id="next">Next</button>

CSS

.container 
     { 
      position: relative; 
      background-color: #f5f5f5; 
      width: 590px; 
      height: 330px; 
      overflow: hidden; 
      font-family: arial, sans; 
      font-weight: bold; 
      text-align: center; 
      margin-bottom: 20px; 
     } 

.block 
     { 
      position: absolute; 
      width: 90px; 
      height: 90px; 
      color: #fff; 
     } 

.block-1 
     { 
      background-color: #900; 
     } 

.block-2 
     { 
      top: 100px; 
      background-color: #090; 
     } 

.block-3 
     { 
      top: 200px; 
      background-color: #009; 
     } 

.block-4 
     { 
      top: 300px; 
      background-color: #990; 
     } 

.block-5 
     { 
      top: 400px; 
      background-color: #909; 
     } 

.block-6 
     { 
      top: 500px; 
      background-color: #099; 
     }

jQuery的

$("#prev").click(function() 
    { 
     $(".block").animate({ "top": "+=50px" }, "slow"); 
    }); 

$("#next").click(function() 
    { 
     $(".block").animate({ "top": "-=50px" }, "slow"); 
    });

來源

2015-02-09 Jane

如果我理解你正確地你需要一種方法來檢查塊的高度來確定多遠滾動。也許以下可以作爲某種啓示：

Fiddle here

var currentBlock = 1, 
    max = $('.container .block').length; 

$("#prev").click(function() { 
    if(currentBlock > 1) { 
     var previous = currentBlock-1; 
     var h = $('.block-' + previous).height() + 5; 
     $(".block-1").animate({ "margin-top": "+=" + h + "px" }, "slow"); 
     currentBlock--; 
    } 
}); 

$("#next").click(function() { 
    if(currentBlock < max) { 
     var h = $('.block-' + currentBlock).height() + 5; 
     $('.block-1').animate({ "margin-top": "-=" + h + "px" }, "slow"); 
     currentBlock++; 
    } 
});

來源

2015-02-09 19:26:44 linurb

而不是單獨移動每塊，嘗試添加一個包裹ping容器並將其移動到「容器」div的內部。小提琴：http://jsfiddle.net/releaf/vydg85o7/1/

$("#prev").click(function() { 
 
    $(".scroll-body").animate({ 
 
    "top": "+=50px" 
 
    }, "slow"); 
 
}); 
 

 
$("#next").click(function() { 
 
    $(".scroll-body").animate({ 
 
    "top": "-=50px" 
 
    }, "slow"); 
 
});

.container { 
 
    position: relative; 
 
    background-color: #f5f5f5; 
 
    width: 590px; 
 
    height: 330px; 
 
    overflow: hidden; 
 
    font-family: arial, sans; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 
.scroll-body { 
 
    position: absolute; 
 
} 
 
.block { 
 
    width: 90px; 
 
    min-height: 90px; 
 
    color: #fff; 
 
    margin-bottom: 10px; 
 
} 
 
.block-1 { 
 
    background-color: #900; 
 
} 
 
.block-2 { 
 
    background-color: #090; 
 
} 
 
.block-3 { 
 
    background-color: #009; 
 
} 
 
.block-4 { 
 
    background-color: #990; 
 
} 
 
.block-5 { 
 
    background-color: #909; 
 
} 
 
.block-6 { 
 
    background-color: #099; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="scroll-body"> 
 
    <div class="block block-1">1</div> 
 
    <div class="block block-2">2</div> 
 
    <div class="block block-3">3</div> 
 
    <div class="block block-4">4</div> 
 
    <div class="block block-5">5</div> 
 
    <div class="block block-6">6</div> 
 
    </div> 
 
</div> 
 
<button id="prev">Previous</button> 
 
<button id="next">Next</button>

來源

2015-02-09 18:34:29 ReLeaf

滾動div，自動調整高度和位置

回答

相關問題