Chrome 开发片段：javascript 平滑滚动缓动答案

【问题标题】：Chrome dev snippet: javascript smooth scroll easingChrome 开发片段：javascript 平滑滚动缓动
【发布时间】：2020-07-24 18:52:40
【问题描述】：

我不是编码专家，而是平面设计师，我正在尝试在滚动时记录一些网页（我还想在滚动时显示所有动画）。我认为最简单的方法是使用鼠标滚轮（也带有缓动）创建平滑滚动，并在滚动时记录我的屏幕。我决定在 Chrome DevTools 中创建一个 sn-p 以保存它并仅在需要时使用它。我做了一些研究，终于找到了一些代码来实现这一点：

jQuery(document).ready(function($){
var body = $( 'body' );
});
;(function($){
    $(window).on('mousewheel DOMMouseScroll', function(e) {
  var dir,
      amt = 800;

  e.preventDefault();
  if(e.type === 'mousewheel') {
    dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
  }
  else {
    dir = e.originalEvent.detail < 0 ? '-=' : '+=';
  }      

  $('html, body').stop().animate({
    scrollTop: dir + amt
  },2000, 'easeInOutExpo');
})
})(jQuery);

我的问题是滚动以“摇晃”开始，然后正常进行。在某些网站中它根本不起作用（可能是因为那些没有运行 jQuery？）为什么？！？

（如果您有最简单的解决方案来满足我的需求，我正在倾听）

谢谢大家。

【问题讨论】：

尝试在chrome://flags中启用Smooth Scrolling并重启浏览器。
我试过了，但问题仍然存在。似乎它开始正常滚动（不平滑）然后重置位置并应用平滑过渡。
以防万一，我的意思是你可以使用内置的平滑滚动而不是这段代码。或者，有一个内置的行为修饰符：window.scrollBy({top:100, behavior: 'smooth'})

标签： javascript google-chrome-devtools code-snippets smooth-scrolling screen-recording

【解决方案1】：

我找到了一种控制滚动和防止鼠标滚轮故障排除的最简单方法：使用箭头键！随着箭头向下一切顺利滚动。我仍然不知道如何更改代码以使用向上箭头键以相同的方式发生。这是修改后的代码：

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
var body = $( 'body' );
});

;(function($){
    // your code
    $(window).keydown(function(e) {
  var dir,
      amt = 1000;

  e.preventDefault();
  //Arrow Down
  if(e.keyCode == 40) {
    dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
  }
  //Arrow Up
  else if (e.keyCode == 38) {
    dir = e.originalEvent.detail < 0 ? '-=' : '+=';
  }      

  $('html, body').stop().animate({
    scrollTop: dir + amt
  },2000, 'easeInOutExpo');
})
})(jQuery);

我知道 if 代码里面有问题，但我不知道我需要更改什么... 有人可以帮助非编码员吗？！？

【讨论】：