增強漫畫櫃手機版

Greasy Fork is available in English.
增強漫畫櫃手機版

漫畫櫃自動隐藏頂部元素、中鍵捲動頁面、圖片高度為視窗高度
当前为 2025-03-02 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name 增強漫畫櫃手機版
// @namespace http://tampermonkey.net/
// @version 0.8
// @description 漫畫櫃自動隐藏頂部元素、中鍵捲動頁面、圖片高度為視窗高度
// @license MIT
// @match *://m.manhuagui.com/comic/*
// @grant none
// ==/UserScript==
(function() {
  'use strict';

//-----------------------------------------------------------------------------------------------------------
// 修正滑鼠中鍵捲動頁面（支持水平和垂直捲動）
let isMiddleButtonPressed = false;
let lastX = 0;
let lastY = 0;

// 監聽滑鼠中鍵按下事件
document.addEventListener('mousedown', function(e) {
    if (e.button === 1) { // 判斷是否是中鍵（button 1）
        isMiddleButtonPressed = true;
        document.body.style.cursor = 'grab';
        lastX = e.clientX; // 記錄初始的X座標
        lastY = e.clientY; // 記錄初始的Y座標
        e.preventDefault(); // 防止預設行為（如點擊選擇文本等）
    }
});

// 監聽滑鼠中鍵釋放事件
document.addEventListener('mouseup', function(e) {
    if (e.button === 1) { // 中鍵釋放
        isMiddleButtonPressed = false;
        document.body.style.cursor = 'default';
    }
});

// 監聽滑鼠移動事件
const scrollElement = document.documentElement || document.body; // 應該是其中之一

document.addEventListener('mousemove', function(e) {
    if (isMiddleButtonPressed) {
        let deltaX = e.clientX - lastX;
        let deltaY = e.clientY - lastY;

        scrollElement.scrollLeft -= deltaX * 2;
        scrollElement.scrollTop -= deltaY * 4;

        lastX = e.clientX;
        lastY = e.clientY;
    }
});

//-----------------------------------------------------------------------------------------------------------
//隱藏元素
  // 获取要隐藏的元素
  var header = document.querySelector('header'); // 修改为你要隐藏的元素的ID或选择器
  var headerheight = '42px';
  var mainnav = document.querySelector('.main-nav');
  var mainbar = document.querySelector('.main-bar');


  if (header) {
    // 隐藏元素
    header.style.position = 'absolute';
    header.style.top = '0px';
    header.style.left = '0px';
    header.style.width = '100%';
    header.style.display = 'block';
    header.style.marginBottom = '0px';
    header.style.height = headerheight;
    header.style.opacity = '0';
    header.style.borderBottom = '0px';
    header.style.zIndex = '10';
    mainnav.style.display = 'none';
    mainnav.style.zIndex = '9';
    mainbar.style.display = 'none';
    document.querySelector('#popCat').style.zIndex = '10';
    document.querySelector('#popHistory').style.zIndex = '10';
    document.querySelector('#popSearch').style.zIndex = '10';
    document.querySelector('#popShelf').style.zIndex = '10';
    document.querySelector('.manga-box').style.zIndex = '5';
    document.querySelector('.manga-panel-box').style.zIndex = '4';
    document.querySelector('.manga-panel-prev').style.zIndex = '4';

    // 为元素添加hover事件
    header.addEventListener('mouseover', function() {
      header.style.position = 'relative';
      header.style.opacity = '1';
      mainnav.style.display = 'block';
      mainbar.style.display = 'block';
      header.style.height = '34px';
    });

    header.addEventListener('mouseout', function() {
      header.style.position = 'absolute';
      header.style.opacity = '0';
      mainnav.style.display = 'none';
      mainbar.style.display = 'none';
      header.style.height = headerheight;
    });
    mainnav.addEventListener('mouseover', function() {
      header.style.position = 'relative';
      header.style.opacity = '1';
      mainnav.style.display = 'block';
      mainbar.style.display = 'block';
      header.style.height = '34px';
    });

    mainnav.addEventListener('mouseout', function() {
      header.style.position = 'absolute';
      header.style.opacity = '0';
      mainnav.style.display = 'none';
      mainbar.style.display = 'none';
      header.style.height = headerheight;
    });
    mainbar.addEventListener('mouseover', function() {
      header.style.position = 'relative';
      header.style.opacity = '1';
      mainnav.style.display = 'block';
      mainbar.style.display = 'block';
      header.style.height = '34px';
    });

    mainbar.addEventListener('mouseout', function() {
      header.style.position = 'absolute';
      header.style.opacity = '0';
      mainnav.style.display = 'none';
      mainbar.style.display = 'none';
      header.style.height = headerheight;
    });
  }
//-----------------------------------------------------------------------------------------------------------
//改變css style
    const style = document.createElement('style');
    style.textContent = `
        body{
            overflow-x: auto;
        }
        .manga-box {
            text-align: center;
        }
    `;
    document.head.appendChild(style);
    function resizeImage() {
        const windowHeight = window.innerHeight;
        const windowWidth = window.innerWidth;

        const img = document.querySelector('.manga-box img');
        if (img && img.complete) {
            const style = document.getElementById('mangaFile-resize-style') || document.createElement('style');
            style.id = 'mangaFile-resize-style';
            if (!document.head.contains(style)) {
                document.head.appendChild(style);
            }

            const adjustedWidth = (windowHeight / img.naturalHeight) * img.naturalWidth;

            if (img.naturalHeight > img.naturalWidth && adjustedWidth > windowWidth) {
                // 高度大於寬度，且調整高度後寬度超過視窗寬度
                style.innerHTML = `.manga-box img { width: ${windowWidth}px; height: auto;}`;
            } else if (adjustedWidth > windowWidth) {
                style.innerHTML = `body { width: ${adjustedWidth}px;}`;

            } else if (img.naturalHeight > img.naturalWidth) {
                // 其他情況，將高度設為視窗高度
                style.innerHTML = `.manga-box img { height: ${windowHeight}px; width: auto;}`;

            }
        }
    }

    function observeImage() {
        const img = document.querySelector('.manga-box img');
        if (img) {
            img.addEventListener('load', resizeImage);
            if (img.complete) {
                resizeImage();
            }
        }
    }

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
                observeImage();
            }
        });
    observeImage(); // 保持原有行為
    });

    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
//-----------------------------------------------------------------------------------------------------------
//Auto Scroll to Right on Large Images
    function scrollToRightIfNeeded() {
        const viewportWidth = window.innerWidth;
        const images = document.querySelectorAll('img');

        for (const img of images) {
            if (img.complete && img.offsetWidth > window.innerWidth) {
                setTimeout(() => {
                    window.scrollTo({ left: document.documentElement.scrollWidth, behavior: 'auto' });
                }, 50); // Reduced delay and faster scroll behavior
                break; // Only scroll once for the first oversized image
            }
        }
    }

    // Run on page load
    window.addEventListener('load', scrollToRightIfNeeded);

    // Optional: observe new images added dynamically
    const scrollobserver = new MutationObserver(scrollToRightIfNeeded);
    scrollobserver.observe(document.body, { childList: true, subtree: true });

})();