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

回答

相关问题