如何更改Chrome Android中的overscroll glow（滚动溢出光晕）颜色？

首先明确：Chrome Android的原生overscroll glow（滚动溢出时的发光效果）是浏览器内置的系统级样式，没有官方提供的直接修改颜色的方法。不过可以通过自定义滚动区域的方式，模拟类似效果来替代原生glow：

• 步骤1：禁用原生overscroll glow效果
  给需要自定义的滚动容器添加CSS属性，关闭原生效果：

  .custom-scroll-container {
    overscroll-behavior: contain;
    overflow: auto;
  }
  

• 步骤2：实现自定义溢出发光效果
  利用伪元素、CSS动画结合JavaScript监听滚动位置，在容器滚动到边缘时显示自定义颜色的发光效果。示例如下：

  .custom-scroll-container {
    position: relative;
    overscroll-behavior: contain;
    overflow: auto;
  }
  
  /* 底部溢出发光效果 */
  .custom-scroll-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(to top, #ff4081, transparent); /* 替换成你需要的颜色 */
    pointer-events: none;
    transition: height 0.2s ease;
  }
  
  .custom-scroll-container.bottom-overflow::after {
    height: 25px;
  }
  

  配合JavaScript监听滚动状态，动态切换类名：

  const scrollContainer = document.querySelector('.custom-scroll-container');
  scrollContainer.addEventListener('scroll', () => {
    const isAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop === scrollContainer.clientHeight;
    scrollContainer.classList.toggle('bottom-overflow', isAtBottom);
  });
  

  用同样的逻辑可以实现顶部、左侧、右侧的自定义发光效果。

注意：这种自定义方案仅能作用于你开发的页面容器内，无法修改Chrome浏览器全局的overscroll glow颜色。

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