如何在GWT/JavaScript中禁用滚动条（可见但置灰，非隐藏）？

没问题，我刚好有几个靠谱的方案能满足你的需求——让滚动条保持可见但置灰禁用，完全基于CSS、纯JavaScript或者GWT实现，不用额外依赖其他库。下面分步骤给你拆解：

一、先搞定滚动条的置灰样式（CSS） #

首先要通过CSS自定义滚动条的外观，让它看起来是“禁用”的灰色状态。不同浏览器的写法略有区别，主要分两类：

WebKit内核浏览器（Chrome、Safari等） #

这类浏览器支持直接用伪元素定制滚动条的各个部分：

/* 先给滚动容器基础样式，强制显示滚动条 */
.scroll-container {
  overflow: scroll; /* 不管内容长短都显示滚动条 */
  width: 100%;
  height: 400px; /* 根据你的需求设置高度 */
}

/* 滚动条轨道样式 */
.scroll-container::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 正常的轨道浅灰色 */
}

/* 滚动条滑块的正常状态 */
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888; /* 正常滑块颜色 */
  border-radius: 4px;
}

/* 禁用状态下的滑块：置灰+禁止鼠标样式 */
.scroll-container.disabled::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 置灰的滑块 */
  cursor: not-allowed;
}

/* 滚动条的宽度/高度 */
.scroll-container::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

Firefox浏览器 #

Firefox用scrollbar-color属性就能快速设置滚动条颜色，非常简洁：

/* 禁用状态下的滚动条颜色：[滑块颜色] [轨道颜色] */
.scroll-container.disabled {
  scrollbar-color: #ccc #f1f1f1;
}

二、真正禁用滚动行为（JS/GWT） #

光靠CSS只能让滚动条看起来像禁用，但用户还是能通过鼠标滚轮、拖拽滑块或者键盘方向键滚动，所以得配合代码阻止滚动事件。

纯JavaScript实现 #

给目标容器加禁用类的同时，绑定事件拦截滚动操作：

// 保存容器元素（比如通过id获取）
const scrollContainer = document.getElementById('your-scroll-container');

// 禁用滚动的函数
function disableScroll() {
  scrollContainer.classList.add('disabled');
  
  // 拦截滚轮事件
  scrollContainer.addEventListener('wheel', preventScroll);
  // 拦截鼠标拖拽滚动条的事件
  scrollContainer.addEventListener('mousedown', preventScroll);
  // 拦截键盘滚动相关按键（方向键、空格、PageUp/PageDown）
  scrollContainer.addEventListener('keydown', preventScroll);
}

// 恢复滚动的函数
function enableScroll() {
  scrollContainer.classList.remove('disabled');
  
  // 移除之前绑定的事件
  scrollContainer.removeEventListener('wheel', preventScroll);
  scrollContainer.removeEventListener('mousedown', preventScroll);
  scrollContainer.removeEventListener('keydown', preventScroll);
}

// 通用的阻止滚动辅助函数
function preventScroll(e) {
  // 判断键盘事件的按键，只拦截滚动相关的，避免影响其他操作
  if (e.type === 'keydown') {
    const scrollKeys = [33,34,35,36,32,37,38,39,40]; // PageUp/PageDown/Home/End/空格/方向键
    if (!scrollKeys.includes(e.keyCode)) return;
  }
  e.preventDefault();
}

GWT实现（Java代码） #

在GWT里可以通过操作DOM元素和绑定事件来实现，代码风格符合GWT的习惯：

import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.ui.Widget;

// 假设你的滚动容器是一个Widget（比如ScrollPanel或者自定义Widget）
public class ScrollController {
    // 提前保存事件处理器的引用，方便后续移除
    private MouseWheelHandler wheelHandler;
    private MouseDownHandler mouseDownHandler;
    private KeyDownHandler keyDownHandler;

    public void disableScroll(Widget scrollContainer) {
        Element elem = scrollContainer.getElement();
        // 添加禁用样式类
        elem.addClassName("disabled");

        // 绑定滚轮事件拦截
        wheelHandler = event -> event.preventDefault();
        elem.addDomHandler(wheelHandler, MouseWheelEvent.getType());

        // 绑定鼠标按下事件（阻止拖拽滚动条）
        mouseDownHandler = event -> event.preventDefault();
        elem.addDomHandler(mouseDownHandler, MouseDownEvent.getType());

        // 绑定键盘事件，只拦截滚动相关按键
        keyDownHandler = event -> {
            int keyCode = event.getNativeKeyCode();
            // 滚动相关按键：PageUp/PageDown/Home/End/空格/上下左右方向键
            boolean isScrollKey = (keyCode >= 33 && keyCode <= 36) 
                    || keyCode == 32 
                    || (keyCode >= 37 && keyCode <= 40);
            if (isScrollKey) {
                event.preventDefault();
            }
        };
        elem.addDomHandler(keyDownHandler, KeyDownEvent.getType());
    }

    public void enableScroll(Widget scrollContainer) {
        Element elem = scrollContainer.getElement();
        elem.removeClassName("disabled");

        // 移除之前绑定的事件处理器
        elem.removeDomHandler(wheelHandler, MouseWheelEvent.getType());
        elem.removeDomHandler(mouseDownHandler, MouseDownEvent.getType());
        elem.removeDomHandler(keyDownHandler, KeyDownEvent.getType());
    }
}

三、几个关键注意点 #

• 一定要给滚动容器设置overflow: scroll，这样不管内容是否超出，滚动条都会保持可见，这是实现需求的基础。
• Firefox的scrollbar-color需要版本64以上支持，如果要兼容旧版Firefox，可以考虑降级用JavaScript事件拦截+自定义样式（不过旧版用户占比已经很低了）。
• GWT里绑定事件时，一定要保存事件处理器的引用，不然无法正确移除事件，会导致内存泄漏或者滚动行为异常。

这样就能完美实现你要的效果：滚动条可见但置灰，无法滚动；需要恢复时调用enableScroll方法即可。

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