如何让div的resize光标显示在垂直滚动条外侧？

1. 嵌套容器分离光标与滚动逻辑 #

最稳妥的方式是把内容和滚动区域拆成两层：外层容器负责ew-resize光标，内层专门处理滚动。这样滚动条属于内层元素，不会和外层的光标属性冲突。

<div class="resize-wrapper">
  <div class="scrollable-content">
    <!-- 你的内容放在这里 -->
  </div>
</div>

.resize-wrapper {
  cursor: ew-resize;
  height: 400px; /* 原固定高度 */
}

.scrollable-content {
  height: 100%;
  overflow-y: scroll;
  /* 不要在这里设置cursor，让外层的光标生效 */
}

鼠标放在内容区会显示resize光标，放在滚动条上则是默认的滚动光标，完美分离两者的交互。

2. 自定义滚动条时单独重置光标 #

如果需要保留单层结构，可以通过自定义滚动条的CSS伪元素，给滚动条区域单独设置默认光标，覆盖外层的resize属性。

.scrollable {
  height: 400px;
  overflow-y: scroll;
  cursor: ew-resize;
}

/* WebKit内核浏览器（Chrome/Safari） */
.scrollable::-webkit-scrollbar {
  width: 12px;
}

.scrollable::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-thumb {
  cursor: default; /* 滚动条区域重置为默认光标 */
}

/* Firefox */
.scrollable {
  scrollbar-color: #888 #f1f1f1;
  scrollbar-width: thin;
}

这种方法不需要修改HTML结构，直接通过CSS伪元素精准控制滚动条的光标样式。

3. 用JS动态切换光标（兼容所有场景） #

如果上面的CSS方法不生效，比如某些浏览器对伪元素支持不好，可以用JS监听鼠标位置，动态切换光标：

const scrollEl = document.querySelector('.scrollable');

// 鼠标移动时判断位置
scrollEl.addEventListener('mousemove', (e) => {
  const rect = scrollEl.getBoundingClientRect();
  // 计算滚动条的位置：元素总宽度 - 内容区宽度 = 滚动条宽度
  const scrollbarWidth = scrollEl.offsetWidth - scrollEl.clientWidth;
  // 鼠标是否在滚动条区域（右侧）
  const isOnScrollbar = e.clientX > rect.left + scrollEl.clientWidth;
  
  scrollEl.style.cursor = isOnScrollbar ? 'default' : 'ew-resize';
});

// 滚动时也需要更新光标状态
scrollEl.addEventListener('scroll', (e) => {
  const rect = scrollEl.getBoundingClientRect();
  const isOnScrollbar = e.clientX > rect.left + scrollEl.clientWidth;
  scrollEl.style.cursor = isOnScrollbar ? 'default' : 'ew-resize';
});

通过计算元素的尺寸差值判断滚动条区域，实时切换光标样式，兼容性拉满。

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