Question

我有一个单页导航网站，所有部分/导航元素的min-height都设置为100vh。有了这个，我有一个平滑的滚动片段来导航。

如果我手动滚动并且该部分没有居中（就像我点击一个菜单项那样）我希望它在给定的时间后居中。注意我不想禁用滚动以通过菜单导航。

我在考虑使用smoothscroll代码添加一些js。要检查截面位置偏移的东西，如果它没有居中，则使用一些缓动功能对其进行平滑滚动。

https://jsfiddle.net/9ta3yh52/将此作为参考，如果颜色超过视口的75％，请滚动至该元素。

感谢你的帮助：）

编辑/解决方案：

迄今为止，@ Hastig Zusammenstellen已经给出了最接近的方法

https://stackoverflow.com/a/39188110/6717849

您必须根据需要对其进行修改，以匹配您拥有的部分数量。当部分设置为height: 100vh时，逻辑很简单：

if (scrollTop <= sectionHeightHalf) {
    $('html, body').animate({
      scrollTop: $("#section1").offset().top
    }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 2 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section2").offset().top
      }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 3 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section3").offset().top
      }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 4 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section4").offset().top
      }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 5 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section5").offset().top
      }, 300);

// etc etc

  } else if (scrollTop >= ($(window).height() * 2 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#lastsection").offset().top
      }, 300);
  }

Answer 1

您可以使用DOMMouseScroll和mousewheel事件与animate()和scrollTop()直接进入良好的窗口位置。

这是。

一段jQuery代码：

$('#about').on('DOMMouseScroll mousewheel', function (e) {
    // scroll down
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    $('html, body').animate({
      scrollTop: $('#services').offset().top
    });
  }
});

来源：

希望它有所帮助。

Answer 2

新版本是使用this code制作的，该版本受到启发或基于代码from here。

它修复了上一版本的双滚动问题，但现在似乎有时会在自动居中后停留。

＆＃13;

$(function() {
  $(window).scroll(function() {
    $('monitor').html('SCROLLING');
    clearTimeout($.data(this, 'scrollCheck'));
    $.data(this, 'scrollCheck', setTimeout(function() {
      $('monitor').html('PAUSED');
      var sectionHeightHalf = $(window).height() / 2;
      var scrollTop = $(window).scrollTop();
      if (scrollTop <= sectionHeightHalf) {
        $('html, body').animate({
          scrollTop: $("#about").offset().top
        }, 300);
      } else if 
        (scrollTop >= sectionHeightHalf && 
         scrollTop <= ($(window).height() * 2 - sectionHeightHalf)) {
          $('html, body').animate({
            scrollTop: $("#services").offset().top
          }, 300);
        } else if (scrollTop >= ($(window).height() * 2 - sectionHeightHalf)) {
          $('html, body').animate({
            scrollTop: $("#gallery").offset().top
          }, 300);
        }
    }, 300) );
  });
});

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}
section {
  position: relative;
}
markercenter, markerbottom, markerfixed, monitor {
  /* scaffolding, to be removed */
  display: flex; 
  justify-content: center; 
  align-items: center;
  height: 20px; width: 20px;
  font-size: 14px;
  color: white;
}
markercenter { 
  /* scaffolding, to be removed */
  /* these are here to judge center of screen for testing */
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  background-color: black;
}
markerbottom { 
  /* scaffolding, to be removed */
  /* these are here to judge center of screen for testing */
  position: absolute;
  //top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  bottom: -10px;
  height: 20px; width: 20px;
  font-size: 14px;
  color: white;
  background-color: black;
}
markerfixed {
  /* scaffolding, to be removed */
  /* these are here to judge center of screen for testing */
  position: fixed;
  top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  height: 20px; width: 20px;
  background-color: rgba(251, 45, 45, 0.7);
}
monitor {
  /* scaffolding, to be removed */
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100px;
  padding: 2px 10px 0px 10px;
  font-size: 14px;
  color: white; font-weight: bold;
  background-color: black;
}
section {
  width: 100%;
	min-height: 100vh;
}
#about{
  background-color: hsla(182, 100%, 85%, 0.5);
}
#services{
  background-color: hsla(61, 99%, 59%, 0.5);
}
#gallery{
  background-color: rgba(195, 251, 45, 0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="about">
  <markercenter>1</markercenter><markerbottom>1</markerbottom>
</section>
<section id="services">
  <markercenter>2</markercenter><markerbottom>2</markerbottom>
</section>
<section id="gallery">
  <markercenter>3</markercenter><markerbottom>3</markerbottom>
</section>
<monitor></monitor>
<markerfixed></markerfixed>

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/9ta3yh52/13/

带双滚动问题的先前版本

https://jsfiddle.net/Hastig/9ta3yh52/12/

平滑滚动到给定时间后居中当前部分

2 个答案: