使用JavaScript实现纵向滚动条出现时隐藏右侧边框

DevOps 小满

2026-10-9

页面出现垂直滚动条时自动隐藏元素右侧边框实现方案

方案1：纯CSS实现（现代浏览器兼容）

依赖CSS :has 伪类实现滚动条状态判断，兼容Chrome 105+、Safari 15.4+、Firefox 121+版本，无需编写JS代码：

/* 匹配存在垂直滚动条的页面 */
html:has(body.scrollHeight > body.clientHeight) .target-element {
  border-right: none;
}

/* 默认带边框的目标元素样式 */
.target-element {
  border-right: 2px solid #333;
  /* 其余元素自定义样式 */
}

方案2：JS实现（全版本兼容，可控性高）

通过JS监听页面状态变化判断滚动条是否存在，兼容性覆盖所有主流浏览器，适合生产环境使用：

先定义两种状态的CSS样式

.target-element {
  border-right: 2px solid #333;
  /* 其余元素自定义样式 */
}
/* 滚动条出现时生效的隐藏边框样式 */
.target-element.hide-right-border {
  border-right: none;
}

编写JS逻辑实现状态自动更新

// 检测是否存在垂直滚动条
function checkVerticalScroll() {
  return document.documentElement.scrollHeight > document.documentElement.clientHeight;
}

// 更新目标元素边框状态
function toggleBorder() {
  const target = document.querySelector('.target-element');
  if (!target) return;
  checkVerticalScroll() ? target.classList.add('hide-right-border') : target.classList.remove('hide-right-border');
}

// 绑定触发事件
window.addEventListener('load', toggleBorder);
window.addEventListener('resize', toggleBorder);
// 若页面有动态插入的内容，新增DOM监听器自动触发状态更新
const domObserver = new MutationObserver(toggleBorder);
domObserver.observe(document.body, { childList: true, subtree: true });