如何使 DIV 自动滚动以适应屏幕答案

【问题标题】：How to make DIV automatically scroll fit to screen如何使 DIV 自动滚动以适应屏幕
【发布时间】：2016-07-20 07:38:52
【问题描述】：

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

这里是示例代码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>

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

【问题讨论】：

请添加您的代码
看看这个，可能对你有帮助：stackoverflow.com/questions/32393734/imitate-parallax-effect
Fiddle 可以很好地解决这个问题。
图像非常好。但是你的代码在哪里？
您的图片与您描述的情况不符。您图像中的 div 似乎具有静态或相对位置，而不是绝对位置（从外观上看）。

标签： jquery html css

【解决方案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 ++
      }

    }


  });

});

【讨论】：

是的......这几乎是我想要实现的......但它无法滚动回第 1 部分
哦，对不起，我帮你更新代码，希望这次能解决你的问题

【解决方案2】：

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

使用 royal slider 你可以实现这个 OOTB，只需将滑块设置为上下而不是向两侧和一些 css 使其 100% 屏幕

【讨论】：

【解决方案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 动画运行时不允许用户滚动。

【讨论】：

【解决方案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

【讨论】：