如何设置overflow-x为auto同时让overflow-y为visible？

CSS方案（推荐，性能最优） #

这是绝大多数场景下的首选方案，核心是通过两层容器结构绕开浏览器默认规则：当元素的overflow-x设为auto/scroll时，如果overflow-y设为visible，浏览器会自动将其重置为auto导致垂直方向也出现滚动条。

实现代码 #

<!-- 两层容器结构 -->
<div class="horizontal-scroll-wrap">
  <div class="scroll-content">
    <!-- 你的业务内容，宽度可超出父容器，高度无限制 -->
  </div>
</div>

.horizontal-scroll-wrap {
  /* 触发水平滚动 */
  overflow-x: auto;
  /* 不要设置固定高度、max-height，让容器高度自适应内容高度 */
  width: 100%;
  max-width: 900px; /* 根据业务需求设置容器宽度阈值 */
}

.scroll-content {
  /* 如果是行内/行内块元素横向排列，加这个属性 */
  white-space: nowrap;
  /* 内容宽度超出父容器即可触发水平滚动，可根据业务调整 */
  width: max-content;
}

适用场景 #

仅内容本身需要横向滚动，没有垂直方向超出滚动容器的悬浮元素（如下拉菜单、hover提示框）的场景。如果有悬浮元素需求，可给外层容器添加足够的padding-bottom容纳垂直溢出的内容，或者用下面的JS方案。

JavaScript方案 #

如果需要垂直方向完全不受容器限制（比如悬浮元素要溢出到滚动容器外面），可以通过JS自定义水平滚动逻辑，完全避开overflow属性的规则限制。

实现代码 #

<div class="custom-horizontal-scroll">
  <div class="content">
    <!-- 业务内容，垂直方向溢出完全可见 -->
  </div>
</div>

.custom-horizontal-scroll {
  width: 900px; /* 滚动容器可见宽度 */
  overflow: visible; /* 两个方向都不裁剪内容 */
  cursor: grab;
}
.content {
  width: 1600px; /* 内容宽度大于容器宽度，触发滚动需求 */
}

const scrollContainer = document.querySelector('.custom-horizontal-scroll')
let isDrag = false
let startPosition = 0
let initScrollLeft = 0

// 拖拽滚动逻辑
scrollContainer.addEventListener('mousedown', e => {
  isDrag = true
  startPosition = e.pageX - scrollContainer.offsetLeft
  initScrollLeft = scrollContainer.scrollLeft
  scrollContainer.style.cursor = 'grabbing'
})

scrollContainer.addEventListener('mouseup', () => {
  isDrag = false
  scrollContainer.style.cursor = 'grab'
})

scrollContainer.addEventListener('mouseleave', () => {
  isDrag = false
  scrollContainer.style.cursor = 'grab'
})

scrollContainer.addEventListener('mousemove', e => {
  if (!isDrag) return
  e.preventDefault()
  const moveDistance = e.pageX - scrollContainer.offsetLeft - startPosition
  scrollContainer.scrollLeft = initScrollLeft - moveDistance * 2 // 最后的数值控制滚动速度
})

// 滚轮控制水平滚动
scrollContainer.addEventListener('wheel', e => {
  e.preventDefault()
  scrollContainer.scrollLeft += e.deltaY
})

适用场景 #

存在垂直方向溢出滚动容器的交互元素，CSS方案无法满足需求的场景。

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