Tampermonkey script, make auto scroll with js

Viewed 37

I want to make a tampermonkey script but I have zero knowledge. Purpose to read comic easier without scrolling.

I want to make tampermonkey with button on the page, location: right, down side. When i click the button it will auto scroll from up to down. And also if you can add speed variant like a volume of youtube: drag up(slower), drag down(faster).

I have an example of the auto scroll, links: https://codepen.io/michaelvinci/pen/qKVBLG?page=1&

Here's the button look like on the web: Button on web

here is code source From https://codepen.io/michaelvinci/pen/qKVBLG?page=1&:

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

and script.js

let x = 0;
let startScroll;

$('.scrollable').scroll(function () {
  x = $(this).scrollTop();
})

$('#scroll-slider').on('input', function () {
  clearInterval(startScroll);
 
  
  if ($('#pause').hasClass('active')) {
    startScroll = setInterval(scroller, 400 / ($('#scroll-slider').val())); 
  }
});

$('.scroll-btn').on('click', function () {
  $('#play').toggleClass('active');
  $('#pause').toggleClass('active');
  
  if ($('#pause').hasClass('active')) {
    startScroll = setInterval(scroller, 800 /($('#scroll-slider').val()) ); 
  } else {
    clearInterval(startScroll);
  }
});

function scroller () {
  x += 1
  $('.scrollable').scrollTop(x); 
}
2 Answers

you just need to change element .scrollable with document, for ui and speed just take it from codepen.

function scroller () {
  x += 1
  $(document).scrollTop(x); 
}

Also note that that is a jQuery script and we have a special way of including jQuery with our scripts.

Instead of the injecting the script tag <script src=etcetera that you posted, just add this bit to your userscript header:

// @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

For example:

// ==UserScript==
// @name         americasvoice.news/shows
// @namespace    http://tampermonkey.net/
// @version      0.1
// @match        https://americasvoice.news/shows/
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

  // your script goes here

})();

Related