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

Question

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

Answer 1

如果我正确地理解了你，你需要一种方法来检查块的高度来确定滚动的距离。也许以下几点可以作为一种启发：

小提琴在这里

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

Answer 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>

​