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

【问题标题】：Scrolling divs, adjusting height and position automatically滚动div，自动调整高度和位置
【发布时间】：2015-04-09 14:21:12
【问题描述】：

我需要滚动 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" );
    });

【问题讨论】：

标签： jquery position jquery-animate height absolute

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

不要单独移动每个块，而是尝试添加一个包装容器并将其移动到您的“容器”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>

【讨论】：