行为的滚动持续时间=在不同的浏览器中流畅

如何解决行为的滚动持续时间=在不同的浏览器中流畅

我要使用window.scrollTo函数，使其行为流畅。 例如：

window.scrollTo({ top: 0,behavior: 'smooth' })

并行我想更改元素的颜色。为此，我可以使用scroll事件来计算当前滚动位置的颜色。但这将导致性能下降，因为滚动回调将经常调用。 更好的解决方案是同时开始过渡。但是为此，我必须知道滚动持续时间。由于无法手动定义，因此我需要知道浏览器使用的持续时间。

解决方法

我在注释中共享的代码示例仅供参考。您还需要根据自己的要求修改代码以滚动页面。

在这里，我试图修改该示例代码以滚动页面。

$(window).scroll(function() {
  
  // selectors
  var $window = $(window),$body = $('body'),$panel = $('.panel');
  
  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);
    
    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index,css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       
      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();

$(document).ready(function(){
  $("button").click(function(){
     $("html,body").animate({
      scrollTop: $("#bottom").offset().top - 220
    },8000);
  // document.getElementById('bottom').scrollIntoView({behavior: "smooth"});
  });
});

/* Setting fade transition and default settings */
body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;
}

/* panel styles */
.panel {
  /* min height incase content is higher than window height */
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: sans-serif;
  /* outline: 10px solid hotpink; */
  /* turn above on to see the edge of panels */
}

/* colours */
.color-violet {
  background-color: #7A4EAB;
}
.color-indigo {
  background-color: #4332CF;
}
.color-blue {
  background-color: #2F8FED;
}
.color-green {
  background-color: #4DCF42;
}
.color-yellow {
  background-color: #FAEB33;
}
.color-orange {
  background-color: #F19031;
}
.color-red {
  background-color: #F2293A;
}

/* styling for demo,can ignore */
body {
  text-align: center;
  font-size: 120%;
  line-height: 1.618;
}
h1,h2 {
  font-size: 3em;
  letter-spacing: -0.05em;
  line-height: 1.1;
}
p {
  max-width: 30em;
  margin-bottom: 1.618em;
}
a {
  color: #4332CF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div class="panel" data-color="white">


    <div>
            <h1>scrolling example</h1>
      <div><button>Click me to scroll to bottom</button></div>
  </div>
</div>
<div class="panel" data-color="violet">
  <h2>Violet panel</h2>
</div>
<div class="panel" data-color="indigo">
  <h2>Indigo panel</h2>
</div>
<div class="panel" data-color="blue">
  <h2>Blue panel</h2>
</div>
<div class="panel" data-color="green">
  <h2>Green panel</h2>
</div>
<div class="panel" data-color="yellow">
  <h2>Yellow panel</h2>
</div>
<div class="panel" data-color="orange">
  <h2>Orange panel</h2>
</div>
<div class="panel" data-color="red">
  <h2>Red panel</h2>
</div>
<div id="bottom"></div>

在MS Edge Chromium浏览器中的输出：

此外，您可以根据需要尝试修改代码示例。

参考：

Code example link