flow icon indicating copy to clipboard operation
flow copied to clipboard

触控板高概率误触

Open ZYDTR opened this issue 6 months ago • 1 comments

作者您好,macOS系统使用Chrome浏览器。在触控板上不小心双指上下翻会一下翻动十几页。双指缩放也会误触翻页。是否考虑在这个功能做好之前直接禁用这个触控翻页功能

ZYDTR avatar Jun 26 '25 04:06 ZYDTR

目前写了一个油猴脚本自行禁用了这个功能:

// ==UserScript== // @name 禁止Flow触控翻页 // @namespace http://tampermonkey.net/ // @version 1.1 // @description Uses MutationObserver to persistently watch for and block scrolling in newly created reader iframes. // @author Your Name & AI Assistant // @match ://app.flowoss.com/ // @grant none // @run-at document-body // ==/UserScript==

(function() { 'use strict';

// --------------------------------------------------
// 1. 定义我们的核心武器:事件阻止函数
// --------------------------------------------------
const stopEvent = (event) => {
    event.preventDefault();
    event.stopPropagation();
};

// --------------------------------------------------
// 2. 定义注入器:将武器安装到目标窗口
// --------------------------------------------------
const injectBlocker = (targetWindow) => {
    console.log('>>> 发现目标窗口,正在注入滚动屏蔽器...');
    const options = { passive: false, capture: true };
    targetWindow.addEventListener('wheel', stopEvent, options);
    targetWindow.addEventListener('touchmove', stopEvent, options);
    console.log('>>> 注入成功,此 iframe 已被控制!');
};

// --------------------------------------------------
// 3. 定义我们的“哨兵”:一个能识别目标的函数
// --------------------------------------------------
const iframeSelector = 'iframe[id^="epubjs-view-"]';

// --------------------------------------------------
// 4. 创建我们的“终极保安”:MutationObserver
// --------------------------------------------------
console.log('脚本启动:部署持久观察者 (MutationObserver)...');

const observer = new MutationObserver((mutations) => {
    // 每次页面有任何变动,都会触发这里
    for (const mutation of mutations) {
        // 我们只关心被添加到页面的新节点
        for (const node of mutation.addedNodes) {
            // 确保这个节点是HTML元素,而不是文本等
            if (node.nodeType === Node.ELEMENT_NODE) {
                // 检查这个新节点本身是不是我们要找的iframe
                if (node.matches(iframeSelector) && node.contentWindow) {
                    injectBlocker(node.contentWindow);
                }
                // 或者,检查这个新节点内部是否包含了我们要找的iframe
                // (这种情况更常见,通常一个div被添加,iframe在里面)
                const iframe = node.querySelector(iframeSelector);
                if (iframe && iframe.contentWindow) {
                    injectBlocker(iframe.contentWindow);
                }
            }
        }
    }
});

// --------------------------------------------------
// 5. 让保安上岗:开始观察整个页面
// --------------------------------------------------
// 我们观察 document.body,并告诉保安我们关心子节点的变动(childList),
// 并且要深入观察所有后代(subtree)。
observer.observe(document.body, {
    childList: true,
    subtree: true
});

// 同时,为了防止脚本启动时 iframe 已经存在,我们先手动检查一次
const existingIframe = document.querySelector(iframeSelector);
if (existingIframe && existingIframe.contentWindow) {
    console.log("脚本启动时发现已存在的 iframe,立即进行初次注入。");
    injectBlocker(existingIframe.contentWindow);
}

})();

ZYDTR avatar Jun 26 '25 05:06 ZYDTR