如何使DIV自动滚动适合屏幕

I'm have 2 DIVs (1 and 2) both are 100% width, 100% height and position:absolute, what i'm trying to achieve is when user viewing DIV 1 and scroll about 10% down, DIV 2 automatically scroll to fit the screen.

我有2个DIV(1和2)都是100%宽度,100%高度和位置:绝对,我想要实现的是当用户观看DIV 1并向下滚动约10%时,DIV 2自动滚动到适合屏幕。

here is the example code https://jsfiddle.net/d6bpr5o2/

这是示例代码https://jsfiddle.net/d6bpr5o2/

<div id="one" class="content">
when user scroll like 10% down. the screen automatically scroll to the next div.
</div>

<div id="two" class="content">
this is second screen
</div>

Here is the CSS:

这是CSS:

.content{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

#one{
    background:blue;
}

#two{
    top:100%;
    background:rgba(255,255,0,1.00);
}

4 个解决方案

#1

Maybe my code can help you? https://jsfiddle.net/moongod101/zbyy7mc5/

也许我的代码可以帮到你? https://jsfiddle.net/moongod101/zbyy7mc5/

$(function(){
    $div1 = $('.div1')
  $div2 = $('.div2')
    $div2Pos = $('.div2').offset().top;
  $time = 0
    $(window).scroll(function(){

    $scrollPos = $(this).scrollTop();
    $to = $div2Pos = 100

    if($scrollPos >= $to){

      if($time == 0){
        //Not scroll before
        $('html, body').animate({
          scrollTop: $div2.offset().top
            }, 2000);
        $time ++
      }

    }


  });

});

#2

sounds like a bad architecture problem, never seen a need like this...sounds like you need a slider.

听起来像一个糟糕的架构问题,从未见过这样的需要......听起来你需要一个滑块。

with royal slider you can achieve this OOTB, just set the slider to go up and down and not to the sides and some css to make it 100% screen

使用皇家滑块你可以实现这个OOTB,只需设置滑块上下而不是侧面和一些css使其100%屏幕

#3

Using @Felix Fong HTML

使用@Felix Fong HTML

Working Demo

$(document).ready(function(){
    $('.content').bind('mousewheel', function(e){
        //var scroll = amountscrolled();
        //console.log(scroll)
        if(e.originalEvent.wheelDelta /120 > 0) {
        if( $(this).prev().length){
            $('html, body').animate({
          scrollTop: $(this).prev().offset().top
            }, 2000);
        }
        }
        else{
        if( $(this).next().length){
            $('html, body').animate({
          scrollTop: $(this).next().offset().top
            }, 2000);
        }
        }
        });






});

You can scroll down and up .Only problem you need to rectify is dont allow user to scroll when scrollTop animation runs.

你可以向下和向上滚动。只有你需要纠正的问题是不允许用户在scrollTop动画运行时滚动。

#4

I did some messing around and came up with this solution: JSFiddle. It seems to work great.

我做了一些搞乱,并提出了这个解决方案:JSFiddle。它看起来很棒。

Do note that this code scrolls with increments of 100vh. This is based of the height when loading the page. This could be solved by changing the variable with a $(document).resize() function, but that is getting a bit offtopic for this question.

请注意,此代码以100vh的增量滚动。这是基于加载页面时的高度。这可以通过使用$(document).resize()函数更改变量来解决,但这对于这个问题来说有点偏离。

I left in the "console.log() functions", those are not necessary to use for the code to work (besides debugging). If you want more explanation on the how of this code leave a reply.

我离开了“console.log()函数”,这些代码无需使用(除了调试)。如果您想了解更多有关此代码如何回复的解释。

html

<div id="no1">1</div>
<div id="no2">2</div>
<div id="no3">3</div>

css

div{
  height:100vh;
  width: 100%;
  text-align: center;
  font-size: 100px;
}
#no1{
  background-color: red;
}
#no2{
  background-color: green;
}
#no3{
  background-color: blue;
}
body{
  margin: 0px;
}

jQuery/javascript

$(document).ready(function(){
  var $windowHeight = $(window).height();
  var currentDiv = 0;
  $(document).scroll(function(){ 
    var $docScrollTop = $(document).scrollTop();
    if($docScrollTop > (currentDiv+0.1)*$windowHeight && $docScrollTop < (currentDiv+0.5)*$windowHeight){
    $(document).scrollTop((currentDiv+1)*$windowHeight);
    currentDiv++;
    console.log("down", currentDiv);
    }
   else if($docScrollTop < (currentDiv-0.1)*$windowHeight && $docScrollTop > (currentDiv-0.5)*$windowHeight){
    $(document).scrollTop((currentDiv-1)*$windowHeight);
    currentDiv--;
    console.log("up", currentDiv);
    }
  });//end scroll

});//end ready

#1