Question

我有2个DIV（1和2）都是100％宽度，100％高度和位置：绝对，我试图实现的是当用户查看DIV 1并滚动大约10％时向下，DIV 2自动滚动以适应屏幕。

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

这是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);
}

Answer 1

也许我的代码可以帮到你？ 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 ++
      }

    }


  });

});

Answer 2

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

使用 皇家滑块 ，您可以实现此OOTB，只需设置滑块上下移动而不是侧面和一些css使其100％屏幕< / p>

Answer 3

使用@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);
        }
        }
        });






});

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

Answer 4

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

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

我离开了“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

如何让DIV自动滚动显示到屏幕

4 个答案: