Question

我有5个div的页面。我的div有不同的高度（它的适应性）。当我滚动当前div的一半时，如何通过鼠标转到下一个div？

我尝试使用fullpage.js和onepage.js，但它不适合我，因为我的div必须是不同的高度

＆＃13;

#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}

#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}

#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}

#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}

#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}

＆＃13;

<div id="first">1 div</div>
<div id="second">2 div</div>
<div id="third">3 div</div>
<div id="fourht">4 div</div>
<div id="fiveth">5 div</div>

＆＃13;

Answer 1

您需要获取高度当前有效元素，并在滚动，一页和整页上为容器转换翻译（0， - 高度）与此合作。

Answer 2

＆＃13;

var $container = $('.container');
var $elem = $container.find('.elem');
var $active = $container.find('.active').height();

$(window).on('scroll',function(){
  $container.css({"transform":"translate(0, -" + $active + "px)"});
});

＆＃13;

body{
      height: 100%;
}
.container{
    transition: 1s all;
}
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}

#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}

#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}

#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}

#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="elem active">1 div</div>
<div id="second" class="elem">2 div</div>
<div id="third" class="elem">3 div</div>
<div id="fourht" class="elem">4 div</div>
<div id="fiveth" class="elem">5 div</div>
  </div>

＆＃13;

Answer 3

我创建了我的版本。看看这个https://codepen.io/damates/pen/VXdKjR。

Jquery的：

$("#nextDiv, #previousDiv").click(function(){
  actualTopOffset = $(window).scrollTop();
  areas = $(".area");
  find = false;
  newPosition = 0;
  type = $(this).attr("data-type");
  areasCount = $(areas).length;
  $.each(areas, function(index, val) { 

    if(type == "next"){//if we click to go next area
      if($(areas).length > (index+1)){
        if(actualTopOffset < $(areas[index+1]).offset().top && !find){// ask if area has top offset higher. If yes set new position
          find = true;
          newPosition = $(areas[index+1]).offset().top;

        }
      }
     }else if(type == "prev"){ //if we click to go previous area
       areasCount--;
       if((areasCount) >= 0){
          if(actualTopOffset > $(areas[areasCount]).offset().top && !find){// ask if area has top offset lower. If yes set new position
            find = true;
            newPosition = $(areas[areasCount]).offset().top;
          }
        }
     }

    });

  if(find){ //If we found new position scroll on new position
    $('html, body').animate({
        scrollTop: newPosition
    }, 1000);
  }

});

CSS：

    #first {
    width:100vw;
    height:700px;
    background-color:lightyellow;
    text-align:center;
}

#second {
    width:100vw;
    height:700px;
    background-color:lightblue;
    text-align:center;
}

#third {
    width:100vw;
    height:1000px;
    background-color:lightpink;
    text-align:center;
}

#fourht {
    width:100vw;
    height:1500px;
    background-color:lightgreen;
    text-align:center;
}

#fiveth {
    width:100vw;
    height:800px;
    background-color:lightgray;
    text-align:center;
}

#nextDiv, #previousDiv{
  position: fixed;
  top: 20px;
  background: red;
}

#previousDiv{
  top: 0px;
}

HTML：

<div id="first" class="area">1 div</div>
<div id="second" class="area">2 div</div>
<div id="third" class="area">3 div</div>
<div id="fourht" class="area">4 div</div>
<div id="fiveth" class="area">5 div</div>
<div id="previousDiv" data-type="prev">Previous div</div>

下一个div

使用滚动编辑版本

我更改了滚动脚本。看看https://codepen.io/damates/pen/VXdKjR

从div滚动到下一个div（不同的高度）

3 个答案:

下一个div