Opera浏览器中React应用Div垂直滚动条背景色修改方案求助

一、CSS原生方案（兼容Opera） #

Opera基于Chromium内核，可通过完整的Webkit滚动条伪类覆盖样式，同时兼顾Firefox支持：

/* 目标滚动容器类 */
.dark-scroll-container {
  /* Firefox 滚动条配置 */
  scrollbar-width: thin;
  scrollbar-color: #888 #2d2d2d; /* 滑块色 轨道背景色 */
}

/* Chromium/Opera 滚动条轨道（背景） */
.dark-scroll-container::-webkit-scrollbar-track {
  background-color: #2d2d2d; /* 替换为你的深色模式背景色 */
  border-radius: 8px;
}

/* Chromium/Opera 滚动条滑块 */
.dark-scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 8px;
  border: 2px solid #2d2d2d; /* 滑块与轨道间隙，优化视觉 */
}

/* 滚动条宽度控制 */
.dark-scroll-container::-webkit-scrollbar {
  width: 10px; /* 垂直滚动条宽度 */
}

使用时给目标div添加dark-scroll-container类即可。

二、自定义滚动条组件（完全可控） #

若原生CSS仍有兼容问题，可封装自定义滚动条组件彻底替代原生滚动条：

import React, { useRef, useEffect } from 'react';

const CustomDarkScrollbar = ({ 
  children, 
  trackColor = '#2d2d2d', 
  thumbColor = '#888',
  height = '100%'
}) => {
  const contentRef = useRef(null);
  const scrollbarThumbRef = useRef(null);

  useEffect(() => {
    const updateScrollbarPosition = () => {
      const content = contentRef.current;
      const thumb = scrollbarThumbRef.current;
      if (!content || !thumb) return;

      const scrollRatio = content.scrollTop / (content.scrollHeight - content.clientHeight);
      const thumbHeight = (content.clientHeight / content.scrollHeight) * 100;
      
      thumb.style.top = `${scrollRatio * 100}%`;
      thumb.style.height = `${Math.max(thumbHeight, 10)}%`; // 限制最小高度
    };

    const content = contentRef.current;
    content?.addEventListener('scroll', updateScrollbarPosition);
    window.addEventListener('resize', updateScrollbarPosition);
    updateScrollbarPosition();

    return () => {
      content?.removeEventListener('scroll', updateScrollbarPosition);
      window.removeEventListener('resize', updateScrollbarPosition);
    };
  }, []);

  const handleThumbDrag = (e) => {
    const content = contentRef.current;
    const container = content?.parentElement;
    if (!content || !container) return;

    const containerRect = container.getBoundingClientRect();
    const maxScrollTop = content.scrollHeight - content.clientHeight;
    const dragRatio = (e.clientY - containerRect.top) / containerRect.height;
    
    content.scrollTop = dragRatio * maxScrollTop;
  };

  return (
    <div style={{ position: 'relative', overflow: 'hidden', height }}>
      {/* 内容容器 */}
      <div
        ref={contentRef}
        style={{
          height: '100%',
          overflowY: 'scroll',
          paddingRight: '12px', // 给自定义滚动条留空间
          scrollbarWidth: 'none', // 隐藏Firefox原生滚动条
          msOverflowStyle: 'none' // 隐藏IE/Edge原生滚动条
        }}
      >
        {children}
        {/* 隐藏Webkit原生滚动条 */}
        <style jsx>{`
          div::-webkit-scrollbar {
            display: none;
          }
        `}</style>
      </div>

      {/* 自定义滚动条轨道 */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: '8px',
          height: '100%',
          backgroundColor: trackColor,
          borderRadius: '4px'
        }}
      >
        {/* 自定义滚动条滑块 */}
        <div
          ref={scrollbarThumbRef}
          style={{
            position: 'absolute',
            left: '1px',
            right: '1px',
            backgroundColor: thumbColor,
            borderRadius: '3px',
            cursor: 'pointer',
            userSelect: 'none',
            transition: 'background-color 0.2s'
          }}
          onMouseDown={(e) => {
            e.preventDefault();
            document.addEventListener('mousemove', handleThumbDrag);
            document.addEventListener('mouseup', () => {
              document.removeEventListener('mousemove', handleThumbDrag);
            });
          }}
          onMouseEnter={(e) => {
            e.target.style.backgroundColor = '#aaa'; // hover高亮
          }}
          onMouseLeave={(e) => {
            e.target.style.backgroundColor = thumbColor;
          }}
        />
      </div>
    </div>
  );
};

export default CustomDarkScrollbar;

使用示例：

<CustomDarkScrollbar trackColor="#1a1a1a" thumbColor="#666" height="400px">
  {/* 你的滚动内容 */}
  <div style={{ height: '1000px', padding: '16px', backgroundColor: '#1a1a1a', color: '#fff' }}>
    深色模式滚动内容示例...
  </div>
</CustomDarkScrollbar>

三、关键注意事项 #

• Opera需使用最新稳定版，旧版本可能对Webkit伪类支持不全；
• 自定义组件已处理滚动同步、鼠标拖拽、hover反馈，可根据需求扩展功能；
• 若使用CSS方案，需确保样式未被其他优先级更高的规则覆盖。

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