LeetCode顯示的多程式設計語言程式碼區域新增水准滾動條

Add a horizontal scrollbar to the div container with class 'bg-layer-2'

目前為 2024-01-13 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         LeetCode显示的多编程语言代码区域增加水平滚动条
// @name:zh-TW   LeetCode顯示的多程式設計語言程式碼區域新增水准滾動條
// @name:en      LeetCode Horizontal Scroll for Multi Programming Language Code Div Container
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description:en Add a horizontal scrollbar to the div container with class 'bg-layer-2'
// @description:zh-tw 將水准滾動條添加到類為“bg-layer-2”的div容器中
// @description  Add a horizontal scrollbar to the div container with class 'bg-layer-2'
// @author       aspen138
// @match        https://leetcode.cn/*
// @match        https://leetcode.com/*
// @grant        none
// @license      MIT
// ==/UserScript==




(function() {
    'use strict';

    // Add your JavaScript code here
    var css = `
        .flex.select-none.bg-layer-2:not(.dark) {
            overflow-x: auto; /* Trigger horizontal scrolling */
            display: flex; /* Ensure the items are in a flex row */
            white-space: nowrap; /* Prevent wrapping of items */
        }
        .flex.select-none.bg-layer-2:not(.dark) > div {
            flex: 0 0 auto; /* Prevent flex items from shrinking */
            display: inline-block; /* Treat each div as an inline block */
        }
        /* Styles for dark mode */
        .flex.select-none.bg-layer-2.dark.bg-dark-layer-2 {
            overflow-x: auto; /* Trigger horizontal scrolling for dark mode */
            display: flex; /* Ensure the items are in a flex row for dark mode */
            white-space: nowrap; /* Prevent wrapping of items for dark mode */
        }
        .flex.select-none.bg-layer-2.dark.bg-dark-layer-2 > div {
            flex: 0 0 auto; /* Prevent flex items from shrinking in dark mode */
            display: inline-block; /* Treat each div as an inline block in dark mode */
        }
    `;

    // Create a style element
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
})();