如何防止iOS上文本选中框在滚动出视图后仍显示？

问题分析 #

iOS Safari里，文本选中的高亮框由浏览器独立渲染，不受滚动容器overflow属性限制，所以选中内容滚出容器视图后，高亮框依然会显示。你尝试的z-index方案无效，因为::selection伪元素的渲染层级由浏览器控制，无法通过z-index调整。

可行解决方案 #

方案1：滚动时清除文本选中状态

监听滚动容器的滚动事件，触发滚动就清除页面所有文本选中范围，选中框会立即消失。

代码示例：

<div id="scrollable">
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />abcdefb<br />
  abcdefb<br />
  abcdefb<br />abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
  abcdefb<br />
</div>

#scrollable {
  background: #EEE;
  width: 200px;
  height: 200px;
  overflow: scroll;
}

const scrollable = document.getElementById('scrollable');
scrollable.addEventListener('scroll', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    selection.removeAllRanges();
  }
});

方案2：用CSS遮罩隐藏容器外的高亮

给滚动容器添加遮罩样式，让超出容器边界的内容（包括选中高亮）被隐藏，同时保留文本选中状态——当内容滚回容器内时，高亮会重新显示。

修改后的CSS：

#scrollable {
  background: #EEE;
  width: 200px;
  height: 200px;
  overflow: scroll;
  /* 添加遮罩，兼容iOS Safari */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 100%);
}

方案选择 #

• 若希望滚动后直接取消文本选中，选方案1；
• 若想保留文本选中状态，仅隐藏容器外的高亮，选方案2。

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