Naxter | Stretch Image to full page width ( Naxter.net )

Stretch an image to the browser's width, ensure vertical scroll works, and reset scroll position to top on navigation. Applicable to Naxter.net

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Greasemonkey lub Violentmonkey.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana jest instalacje jednego z następujących rozszerzeń: Tampermonkey, Violentmonkey.

Aby zainstalować ten skrypt, wymagana będzie instalacja rozszerzenia Tampermonkey lub Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

Aby zainstalować ten skrypt, musisz zainstalować rozszerzenie menedżera skryptów użytkownika.

(Mam już menedżera skryptów użytkownika, pozwól mi to zainstalować!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Będziesz musiał zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

Musisz zainstalować rozszerzenie menedżera stylów użytkownika, aby zainstalować ten styl.

(Mam już menedżera stylów użytkownika, pozwól mi to zainstalować!)

// ==UserScript==
// @name         Naxter | Stretch Image to full page width ( Naxter.net )
// @namespace    http://naxter.net/
// @version      1.2
// @description  Stretch an image to the browser's width, ensure vertical scroll works, and reset scroll position to top on navigation. Applicable to Naxter.net
// @author       CrackerNut
// @match        *://naxter.net/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to apply the desired styles
    const applyStyles = () => {
        const img = document.querySelector('div[class*="chakra-stack"] img');
        if (img) {
            img.style.width = '100%';
            img.style.height = 'auto';
            img.style.maxWidth = 'none';
            img.style.maxHeight = 'none';
        }

        const container = document.querySelector('div[class*="chakra-stack"]');
        if (container) {
            container.style.overflow = 'visible';
            container.style.height = 'auto';
            container.style.maxHeight = 'none';
        }

        document.body.style.overflowY = 'scroll';
        document.body.style.height = 'auto';
        document.documentElement.style.overflowY = 'scroll';
        document.documentElement.style.height = 'auto';
    };

    // Function to reset scroll position
    const resetScrollPosition = () => {
        window.scrollTo(0, 0); // Scroll to the top of the page
    };

    // Initial application of styles
    applyStyles();

    // Set up MutationObserver to watch for changes in the DOM
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length > 0) {
                applyStyles(); // Apply styles whenever new elements are added
                resetScrollPosition(); // Reset scroll position
            }
        });
    });

    // Start observing the DOM
    observer.observe(document.body, { childList: true, subtree: true });
})();