时间戳

首页 > 解决方案 > Chrome 开发片段：javascript 平滑滚动缓动

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

问题描述

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

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？）为什么？！？

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

谢谢大家。

标签： javascriptgoogle-chrome-devtoolscode-snippetssmooth-scrollingscreen-recording

解决方案

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

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);

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

推荐阅读