滚动位置> 0后如何平滑滚动到元素？答案

【问题标题】：How to smooth scroll down to element after scroll position > 0?滚动位置> 0后如何平滑滚动到元素？
【发布时间】：2019-05-10 14:32:33
【问题描述】：

我的页面顶部有一个全屏预告片。当用户开始滚动时，我希望整个页面自动平滑地向下滚动到以下部分。

很遗憾，以下代码不起作用。正如发布的那样，它根本不滚动，当我没有将滚动变量设置为 true 以避免多次 scrollIntoView 执行时，它非常慢。

使用 vanilla JS 解决此问题的好方法是什么？

示例，在 Chrome 中测试：

let scrolling = false;

window.onscroll = () => {
  const offset = window.pageYOffset;
  if (offset > 0 && offset < window.innerWidth && !scrolling) {
    scrolling = true;
    document.querySelector('.somecontent').scrollIntoView({behavior:'smooth'});
  }
  
  if (offset >= window.innerWidth) {
    scrolling = false;
  }
}

.someteaser {
  background: blue;
  height: 100vh;
  width: 100vw;
}

.somecontent {
  background: red;
  height: 200vh;
  width: 100vw;
}

<div class="someteaser"></div>
<div class="somecontent"></div>

// 更新

所以问题在于行为：'smooth' 选项。没有它，滚动工作，但当然不再平滑了。这似乎是 scorllIntoView 上的一个错误，我不太明白。我的临时解决方案使用这个脚本，它工作正常：https://github.com/cferdinandi/smooth-scroll

【问题讨论】：

不确定你想要达到什么目的，但如果我明白了一般的想法，如果页面开始滚动超出我的控制，我会有点困惑和恼火
这在现代网页设计中很常见。这是这个alvarotrigo.com/fullPage 的流行框架，不幸的是它还有其他问题，所以这对我来说不是解决方案。
您不希望它在window.onload 中运行吗？至于平滑滚动功能，有很多库可以做到这一点。您可以在 this SO answer 中查看一个很好的示例
看起来您需要为偏移设置动画，使其具有缓动效果。您可以将其拆分为 2 个任务 - 1 - 找到设置偏移量的方法，以便您的页面看起来具有代表性，2 - 为偏移量设置动画。
alvarotrigo.com/fullPage 对您有什么问题吗？ （一个就够了）

标签： javascript

【解决方案1】：

这个问题让我很感兴趣，所以我这样做了，试图让它更宽（它会自动上下滚动）。我希望它适合你的问题..

（sn-p 在整页上工作更好）

const
  AllSections   = document.querySelectorAll('body > section'), // all target Section reference
  SectionsCount = AllSections.length,
  opt           = {behavior: "smooth", block: "start"};

var
  NoSmooth       = true, // autoScroll is off
  Last_W_PosY    = 0,    // used to determine scrolling event direction
  Smooth_Id      = 0,    // setTimeout for launching autoScroll
  Smooth_End     = 0,    // setinterval to detect end of autoScroll
  Scroll2Section = -1;   // target section for autoScroll

window.onscroll = () => {
  clearTimeout(Smooth_Id);
  let
    W_PosY    = window.pageYOffset,
    W_height  = window.innerHeight,
    direction = (Last_W_PosY < W_PosY) ? 'down' : 'up';

  if (NoSmooth){
    Scroll2Section = -1;
    let parts_Section = true;

    for(let i = 0; i< SectionsCount; i++){
      let SectionRect = AllSections[i].getBoundingClientRect();
      if ( SectionRect.y <= 0 && (SectionRect.height + SectionRect.y) >= W_height )
      {
        parts_Section = false;
        break;
      }
    }
    if (parts_Section){
      if (direction==='down') {
        for (let i = 0; i< SectionsCount; i++){
          if (AllSections[i].getBoundingClientRect().y > 0 ) {
            Scroll2Section = i;
            break;
          }
        }
      }
      if (direction==='up') {
        for (let i = SectionsCount; i-->0;){
          if (AllSections[i].getBoundingClientRect().y < 1) { // somme top position are not precise
            Scroll2Section = i;
            break;
          }
        }
      }
    }

    if (parts_Section) {
      Smooth_Id = setTimeout(Smooth_Action, 300) // reaction delay for auto scroll
    }
  }
  Last_W_PosY = W_PosY;
}

function Smooth_Action(){
  NoSmooth = false;
  AllSections[Scroll2Section].scrollIntoView( opt );
  clearInterval(Smooth_End);
  Smooth_End = setInterval(Wait_Smooth_Finish, 100 )
}

function Wait_Smooth_Finish(){
  let W_PosY = window.pageYOffset;
  if (Last_W_PosY==W_PosY) {
    NoSmooth = true;
    clearInterval(Smooth_End);
  }
  Last_W_PosY = W_PosY;
}

body           { margin: 0; }
body > section { display: block; width: 100%; margin: 0  }
.content_0     { height: 100vh; background: #001f3f; }
.content_1     { height: 120vh; background: #FF851B; }
.content_2     { height: 140vh; background: #39CCCC; }
.content_3     { height: 160vh; background: #F012BE; }
p { display:inline-block; margin:20px; padding:3px; background-color:#f0f8ff }

<section class="content_0"> <p>1 / 4</p> </section>
<section class="content_1"> <p>2 / 4</p> </section>
<section class="content_2"> <p>3 / 4</p> </section>
<section class="content_3"> <p>4 / 4</p> </section>

【讨论】：