This userscript is designed for mobile browsers, and scrolls page on double tap. Top half of the screen scrolls up, and bottom half scrolls down. Double tap and move finger enables fast scrolling mode. When page is already scrolling, single tap will scroll it further.
// ==UserScript==
// @name Scroll page on double tap (mobile)
// @description This userscript is designed for mobile browsers, and scrolls page on double tap. Top half of the screen scrolls up, and bottom half scrolls down. Double tap and move finger enables fast scrolling mode. When page is already scrolling, single tap will scroll it further.
// @description:ru Этот скрипт разработан для мобильных браузеров, и прокручивает страницу при двойном нажатии. Верхняя половина экрана прокручивает вверх, а нижняя половина — вниз. Двойное нажатие и движение пальцем включает режим быстрой прокрутки. Когда страница уже прокручивается, одиночный тап прокрутит её дальше.
// @version 1.0.2
// @author emvaized
// @license MIT
// @namespace scroll_page_on_double_tap
// @match *://*/*
// @grant none
// @run-at document-start
// ==/UserScript==
/* *** Changelog
1.0.2
- switched to screenY instead of clientY to determine screen halves
- reordered config variables for better relevance
1.0.1
- implemented fling (kinetic) scrolling
- make preventing first tap toggleable, and disable by default
- implemented fast scrolling on double tap + move (enabled by default)
1.0.0
Initial release
*** */
(function() {
'use strict';
// Configs
const fastScrollingEnabled = true; // To enter fast scrolling mode, double tap and move finger on a second tap
const fastScrollingFriction = 0.93; // Multiplier for dy touch movement during fast scrolling
const scrollVelocity = 13.5; // Initial speed of the scroll (higher values will make it faster)
const scrollDecay = 0.98; // The rate at which the scroll slows down (values closer to 1 will make the scroll slower to decelerate)
const scrollInterval = 8; // Time in milliseconds between each scroll step (16 ms gives approximately 60 frames per second)
const doubleTapTimeout = 200; // Timeout for second tap in milliseconds
const maxTapMovement = 10; // Maximum touch movement (in pixels) to qualify as a tap
const preventFirstTap = false; // With this flag script will block the first tap on page and wait for the second tap. Allows to double tap links and images to scroll, but causes issues
// Service variables
let lastTapUpTime = 0; // To track timing between taps
let firstTapEvent = null; // To store the first tap event details
let startX = 0; // Start position for touch
let startY = 0;
let isFastScrolling = false; // Manual scroll mode on double tap + move
let lastMoveY; // Last Y position for manual scrolling
let doubleTapDownTimeout;
let lastTapDownTime = 0; // To track timing between taps
let preventFlingScrolling = false; // Use to stop fling scroll when user manually scrolled page
let isFlingScrolling = false; // To track if page is currently in kinetic scrolling state
document.addEventListener('touchstart', function(event) {
// Only handle single-finger touches
if (event.touches.length === 1) {
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
// Reset variables from last taps
lastMoveY = null;
preventFlingScrolling = false;
// Detect double tap for manual scrolling
const currentTapDownTime = new Date().getTime();
const tapDownInterval = currentTapDownTime - lastTapDownTime;
if (fastScrollingEnabled && tapDownInterval < doubleTapTimeout && tapDownInterval > 0) {
// Double-tap detected within timeout
cancelEvent(event);
// Enable manual scrolling mode
doubleTapDownTimeout = setTimeout(() => {
isFastScrolling = true;
}, doubleTapTimeout);
} else {
// First tap: store the event and set timeout for single-tap action
lastTapDownTime = currentTapDownTime;
isFastScrolling = false;
if (preventFirstTap) cancelEvent(event);
}
}
}, { passive: fastScrollingEnabled || preventFirstTap ? false : true}, true);
if (fastScrollingEnabled)
window.addEventListener('touchmove', function(event){
if ((isFastScrolling || isFlingScrolling) && event.touches.length === 1) {
const currentMoveY = event.touches[0].clientY;
if(!lastMoveY) lastMoveY = currentMoveY;
const scrollDelta = lastMoveY - currentMoveY;
const scrollDeltaAbs = Math.abs(scrollDelta);
if(isFastScrolling){
// Prevent default action (scrolling page)
cancelEvent(event);
lastMoveY = currentMoveY;
if(scrollDeltaAbs > 0.3)
flingScroll(
window,
(fastScrollingFriction * scrollDelta) * 2,
scrollDecay, scrollInterval
);
} else if(isFlingScrolling && scrollDeltaAbs > 0.3) {
isFlingScrolling = false;
preventFlingScrolling = true;
}
}
}, { passive: false }, true)
document.addEventListener('touchend', function(event) {
// Only proceed if it’s a single-finger touch event
if (event.changedTouches.length > 1) return;
const endX = event.changedTouches[0].clientX;
const endY = event.changedTouches[0].clientY;
const deltaX = Math.abs(endX - startX);
const deltaY = Math.abs(endY - startY);
// If movement exceeds maxTapMovement, consider it a scroll/swipe and ignore
if (deltaX > maxTapMovement || deltaY > maxTapMovement) return;
const currentTime = new Date().getTime();
const tapInterval = currentTime - lastTapUpTime;
// Disable manual scrolling mode
isFastScrolling = false;
clearTimeout(doubleTapDownTimeout);
// Scroll up if tapped in top half of the screen, scroll down if tapped in bottom half
const scrollDown = event.changedTouches[0].screenY > (window.screen.height / 2);
if (tapInterval < doubleTapTimeout && tapInterval > 0) {
// Double-tap detected within timeout
// Prevent default action (including link navigation)
cancelEvent(event);
// Execute custom double-tap action: scroll down
scrollPage(scrollDown);
// Reset stored event and timing
lastTapUpTime = 0;
firstTapEvent = null;
} else {
// First tap
// If kinetic scrolling in proccess, scroll again
if(isFlingScrolling){
cancelEvent(event);
scrollPage(scrollDown);
return;
}
// Store the event and set timeout for single-tap action
firstTapEvent = event;
lastTapUpTime = currentTime;
setTimeout(() => {
// If no second tap, execute single-tap action
if (preventFirstTap && firstTapEvent && !isFlingScrolling && !isFastScrolling) {
if(isFlingScrolling) return;
// Prevent default action
event.preventDefault();
event.stopPropagation();
// Create and dispatch a manual click event
const singleClickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
button: 0,
detail: 1,
view: window,
});
firstTapEvent.target.dispatchEvent(singleClickEvent);
}
firstTapEvent = null;
}, doubleTapTimeout);
}
}, { passive: false }, true);
// Prevent regular scrolling when manual scroll is in progress
if (fastScrollingEnabled){
document.addEventListener('wheel', function(e) {
if(isFastScrolling) cancelEvent(event);
}, { passive: false });
document.addEventListener('scroll', function(e) {
if(isFastScrolling) cancelEvent(event);
}, { passive: false });
}
// Scroll page up or down
function scrollPage(scrollDown){
flingScroll(
document.scrollingElement,
(scrollDown ? 1 : -1) *
scrollVelocity / window.visualViewport.scale,
scrollDecay,
scrollInterval
)
}
// Prevent default event action
function cancelEvent(event){
event.preventDefault();
event.stopPropagation();
// event.stopImmediatePropagation();
}
// For fling scroll (kinetic scrolling)
function flingScroll(element, velocity = 13.5, decay = 0.98, interval = 8) {
let currentVelocity = velocity; // initial velocity of the fling scroll
function scrollStep() {
isFlingScrolling = true;
if(preventFlingScrolling && !isFastScrolling) {
isFlingScrolling = false;
return;
}
// Scroll the element by the current velocity
element.scrollBy({
left: 0,
top: currentVelocity,
behavior: "instant"
});
// Reduce the velocity to simulate natural slowing down
currentVelocity *= decay;
// Stop scrolling if the velocity is very low
if (Math.abs(currentVelocity) > 1) {
setTimeout(scrollStep, interval);
} else {
isFlingScrolling = false;
}
}
// Start the fling scroll
scrollStep();
}
})();