CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolscode-snippetssmooth-scrollingscreen-recording
bambagias
bambagias

Reputation: 1

Chrome dev snippet: javascript smooth scroll easing

i'm not a coding expert but a graphic designer, and i'm trying to recording some webpages while scrolling them (i also want to show all the animations while scrolling). I thought that the easyest way was creating a smooth scroll using mousewheel (with easings too), and record my screen while scrolling. I decided to create a snippet in Chrome DevTools to keep it saved and use it only when i need it. I made some researches and i finally found some code to achieve this:

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

My problem is that the scroll begins with a "shaking", then it goes normally. In some websites it doesn't work at all (maybe because those are not running jQuery?) Why?!?

(if you have easiest solutions to achieve my needs i'm listening)

Thanks for all.

Upvotes: 0

Views: 337

Answers (1)

bambagias
bambagias

Reputation: 1

I've found an easiest way to control scrolling and to prevent mousewheel troubleshotting: using arrow keys! With arrow down everything scrolls smoothly. Still i don't know how to change code to make it happen the same way with arrow up key. Here's the modified code:

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

I know there's something wrong inside if codes but i don't know what i need to change... Someone can help a non-coder?!?

Upvotes: 0

Related Questions