อ่านมังงะสนุกขึ้น แค่มีสคริปต์จิ้มภาพแล้วเลื่อนจอ

ผมเคยอ่านมาทั้ง 2 แบบ แล้วรู้สึกว่า การกดที่รูปภาพแล้วมันเลื่อนจอให้เป็นอะไรที่ฟินสุดจริง ไม่ต้องไถนิ้วเลื่อนเอาเอง แล้วมันจะมีบางเว็บที่เป็นแบบจิ้มแล้วเลื่อน กับต้องไถ เพราะงั้นเราจะมาทำให้เว็บที่ต้องไถให้จิ้มได้กัน

Android

อัพเดทตอนนี้บราวเซอร์ที่สามารถติดตั้งส่วนเสริมได้จะมี Firefox กับ Microsoft Edge แล้วก็ไปติดตั้งส่วนขยายที่ชอบมา ตอนนี้เราชอบ ScriptCat แต่ก็จะมี ViolentMonkey หรืออื่นๆ อีก เลือกเอาตามถนัดเลย

แบบง่าย

// ==UserScript==
// @name         Scroll on Image Click
// @namespace    myscript
// @version      1.0
// @description  แตะที่รูปภาพแล้วเลื่อนหน้าจอลงทีละ 70%
// @author       KanexKane
// @match        https://www.somemangaweb.com/episope/*
// @grant        none
// ==/UserScript==

// ที่ต้องเปลี่ยนก็จะมี @match นี่แหละที่สำคัญ ต้องเป็นหน้าที่อ่านมังงะ

(function() {
    'use strict';

    // ฟังก์ชันเลื่อนลง 70% ของหน้าจอ
    function scrollDownPage() {
        window.scrollBy({ top: window.innerHeight * 0.7, behavior: 'smooth' // หรือ instant});
    }

    // ดักจับการคลิกที่รูปภาพในหน้า
    document.body.addEventListener('click', function(event) {
        if (event.target.tagName.toLowerCase() === 'img') {
            scrollDownPage();
        }
    });
})();

ถ้าเป็นโปรแกรมเมอร์มาเห็นน่าจะเข้าใจเลย แต่ถ้าคนไม่ใช่อาจจะต้องทำความเข้าใจสักนิด โดยส่วนที่ต้องเปลี่ยนคือ @match เป็นการระบุว่าเราจะใช้สคริปต์นี้กับ URL ไหนนั่นแหละ

โดยตัวอย่างจะเป็น https://www.somemangaweb.com/episope/* ก็คือหน้าที่อ่านมังงะมันจะอารมณ์เป็น URL แบบนี้ https://www.somemangaweb.com/episope/holy-emperors-1/ ที่เปลี่ยนก็คือส่วนหลัง episope ก็เลยใส่เป็น * ไว้เพื่อให้สคริปต์มันรู้

แต่อีกตัวอย่างคือ https://www.somemangaweb2.com/holy-emperors-1/ ก็ใส่ @match แบบนี้ https://www.somemangaweb2.com/*

แบบกำหนดความเร็วได้

// ==UserScript==
// @name         Scroll on Image Click
// @namespace    com.kanexkane
// @version      1.0
// @description  แตะที่รูปภาพแล้วเลื่อนหน้าจอลง
// @author       KanexKane
// @match        https://*/*
// @grant        none
// ==/UserScript==

// อันนี้เรากำหนด @match แบบทั้งหมดทุกเว็บเลย

(function() {
    'use strict';

    // ดักจับการคลิกที่รูปภาพในหน้า
    document.body.addEventListener('click', function(event) {
        if (event.target.tagName.toLowerCase() === 'img') {
            // เลื่อนลง 65% ของความสูงหน้าจอ และระยะเวลา 150ms
            customScrollBy(window.innerHeight * 0.65, 150);
        }
    });
})();

function customScrollBy(yDistance, duration) {
    const start = window.scrollY;
    const startTime = performance.now();

    function animate(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        
        // คำนวณตำแหน่งและเลื่อนหน้าจอ
        window.scrollTo(0, start + (yDistance * progress));

        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }
    requestAnimationFrame(animate);
}

เพิ่มให้อีกหน่อย เผื่อบางเว็บอยากปรับแต่ง CSS เอง

สำหรับส่วนเสริม ScriptCat ใช้ GM_addStyle อันอื่นมีไหมไม่รู้นะ?

// ==UserScript==
// @name         Add Style to web manga
// @namespace    com.kanexkane
// @version      1.0.0
// @description  add css to manga
// @author       You
// @match        https://somemanga.com/read/*
// @grant        GM_addStyle
// @noframes
// ==/UserScript==

GM_addStyle(`
  .header{
    background-color: black;
  }
`);