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

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

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，自动调整高度和位置

2 个答案: