如何为Cloudflare应用设置滚动条的深色、浅色及自定义样式？

Hey there! Let's get your custom scrollbar up and running for your Cloudflare app. Since you're working with separate JS files for dark and light modes, here's a simple, practical approach that doesn't require advanced JS knowledge:

Step 1: Dark Mode Scrollbar JS File #

Create a file (e.g., dark-scrollbar.js) with this code. It dynamically injects the dark mode scrollbar styles into the page:

// Wait for the DOM to fully load before injecting styles
document.addEventListener('DOMContentLoaded', () => {
  // Create a new <style> element
  const darkScrollbarStyle = document.createElement('style');

  // Add your dark mode scrollbar styles
  darkScrollbarStyle.textContent = `
    /* WebKit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
      width: 15px;
    }
    ::-webkit-scrollbar-track {
      background-color: #232323;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #494949;
    }
    ::-webkit-scrollbar-corner {
      background-color: black;
    }

    /* Firefox compatibility */
    * {
      scrollbar-width: thin;
      scrollbar-color: #494949 #232323;
    }
  `;

  // Attach the style to the document head
  document.head.appendChild(darkScrollbarStyle);
});

Step 2: Light Mode Scrollbar JS File #

Make a second file (e.g., light-scrollbar.js) for light mode. Adjust the color values to match your light theme:

document.addEventListener('DOMContentLoaded', () => {
  const lightScrollbarStyle = document.createElement('style');

  lightScrollbarStyle.textContent = `
    /* WebKit browsers */
    ::-webkit-scrollbar {
      width: 15px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f8f8f8;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #cccccc;
    }
    ::-webkit-scrollbar-corner {
      background-color: #eeeeee;
    }

    /* Firefox compatibility */
    * {
      scrollbar-width: thin;
      scrollbar-color: #cccccc #f8f8f8;
    }
  `;

  document.head.appendChild(lightScrollbarStyle);
});

Key Notes for Cloudflare Apps #

• Loading the Scripts: In your Cloudflare App configuration, load the appropriate JS file based on the user's theme preference (e.g., detect system dark mode, or let users toggle manually).
• DOMContentLoaded: Wrapping the code in this event ensures the script runs only after the page's HTML is fully loaded, so we can safely access document.head.
• Cross-Browser Support: The extra Firefox styles ensure your scrollbar looks consistent across major browsers (WebKit-based browsers need the ::-webkit- prefix, while Firefox uses scrollbar-width and scrollbar-color).

That's it! This approach keeps your styles encapsulated in separate JS files as you requested, and works seamlessly within a Cloudflare App environment.

内容的提问来源于stack exchange，提问作者Saxo_Broko