滚动div，自动调整高度和位置

Question

我需要滚动 div 中的内容块并且我需要每个块之间的 space 相等，但我无法真正预测每个块的高度将完全相同，有些可能有四行，有些可能有三行。然而，我让我的滚动条工作的唯一方法是为每个块分配一个特定的高度和位置。如果行数（以及块的高度）发生变化，有没有一种方法可以获得相同的结果？

这是我的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" );
    });

Answer 1

与其将每个块按原样移入div，不如尝试添加一个包装容器并将其移入 'container' div。 Fiddle: 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>

Answer 2

如果我对您的理解正确，您需要一种方法来检查块的高度以确定滚动的距离。也许以下内容可以作为某种灵感：

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++;
    }
});

滚动div，自动调整高度和位置

Scrolling divs, adjusting height and position automatically

jquery

height

position

absolute

jquery-animate