Javascript 用鼠标滚动到块的高度

当滚动页面的滚动恰好发生在其中的块（其中的代码）的高度时，该怎么办

我不想使用该库，因为可能需要添加2-5行代码来解决在块高度（预定像素数）滚动页面时滚动页面的问题

第二个问题是如何使它平滑滚动，这不是从一个单元切换到另一个单元的感觉

函数幻灯片（）{
h=document.documentElement.clientHeight
$（.1、.2、.3”）.css（'height'，h）；
};
$（窗口）。调整大小（幻灯片）；
$（文件）。准备就绪（幻灯片）
.one，
.2，
.二{
显示：块；
位置：相对位置；
宽度：100%；
}
.一{
背景：#CD5；
}
.二{
背景：海蓝宝石；
}
.三{
背景：2196F3；
}
根据我的理解，我已经在JSFIDLE上创建了一个解决方案，请检查

我正在使用鼠标滚轮事件

HTML

<div class="one">
  <h1>ONE</h1></div>
<div class="two">
  <h1>Two</h1></div>
<div class="three">
  <h1>Three</h1></div>

jQuery

$(document).ready(function() {

      var h = $(document).height();
      var body = $("body");

      $(".one, .two, .three").css('height', h);


      $(document).on('mousewheel', function(e) {

        if (e.originalEvent.wheelDelta / 120 < 0) { // if Mouse wheel up
          var st = $(document).scrollTop();

          body.animate({
            scrollTop: st + h
          }, '500');


        } else if (e.originalEvent.wheelDelta / 120 > 0) { // if Mouse wheel down
          var st = $(document).scrollTop();

          body.animate({
            scrollTop: st - h
          }, '500');
        }
        console.log($('.one').height());

      });

    });

$（文档）.ready（函数（）{
var h=$（document.height（）；
主体变量=$（“主体”）；
$（.1、.2、.3”）.css（'height'，h）；
$（文档）.on（'mouseweell'，函数（e）{
if（e.originalEvent.wheeldta/120<0）{//if鼠标滚轮向上
var st=$（document.scrollTop（）；
使有生气({
滚动顶部：st+h
}, '500');
}else if（e.originalEvent.wheeldta/120>0）{//if鼠标滚轮按下
var st=$（document.scrollTop（）；
使有生气({
滚动顶：st-h
}, '500');
}
console.log（$（'.one'）.height（））；
});
});

更新
检查这个

如果在动画结束前快速滚动事件触发器，我已将其修复
将滚动处理程序绑定到mousewheel和DOMMouseScroll事件，并使用（event.originalEvent.wheelDelta>0 | | event.originalEvent.detail<0）确定滚动方向。然后使用$（）.offset（）.top查找要滚动的div的顶部，并使用$.animate（）进行滚动


函数幻灯片（）{
h=document.documentElement.clientHeight
$（.1、.2、.3”）.css（'height'，h）；
};
$（窗口）。调整大小（幻灯片）；
$（文件）。准备就绪（幻灯片）；
$（文档）.bind（'mousewheel-DOMMouseScroll'，函数（事件）{
滚动（事件）；
});
var-num=1；
var滚动=假；
功能滚动（事件）{
event.preventDefault（）；
如果（！滚动）{
滚动=真；
if（event.originalEvent.wheelDelta>0 | | event.originalEvent.detail<0）{
num--；
num=num<1？1:num；
}否则{
num++；
num=num>3？3:num；
}
$（'html，body'）。设置动画({
scrollTop:$（“.num”+num）.offset（）.top
}，500，“线性”，函数（）{
滚动=假；
});
}
}
.one，
.2，
.二{
显示：块；
位置：相对位置；
宽度：100%；
}
.一{
背景：#CD5；
}
.二{
背景：海蓝宝石；
}
.三{
背景：2196F3；
}

那么，当您可以同时看到所有三个
div
s时，您想启动一个函数吗？我希望每次鼠标滚动，页面都会滚动到指定的像素数，这等于块的高度。因此，每次滚动时，页面都会向下移动一定量，而不是滚动的量？是的（从一个块到另一个块）好的。我现在可以找到一个答案：大滚动的数据不起作用。请尝试快速滚动。@Бцццццццццццццццццццц在jQuery 1.12和2.2中已弃用。这些函数在1.12或2.2中运行良好，没有警告消息，但在下一版本和（当然）在3.0中不起作用。强烈建议使用.on（）而不是.bind（）和.delegate（）
$(document).ready(function() {

      var h = $(document).height();
      var body = $("body");

      $(".one, .two, .three").css('height', h);


      $(document).on('mousewheel', function(e) {

        if (e.originalEvent.wheelDelta / 120 < 0) { // if Mouse wheel up
          var st = $(document).scrollTop();

          body.animate({
            scrollTop: st + h
          }, '500');


        } else if (e.originalEvent.wheelDelta / 120 > 0) { // if Mouse wheel down
          var st = $(document).scrollTop();

          body.animate({
            scrollTop: st - h
          }, '500');
        }
        console.log($('.one').height());

      });

    });