如何实现X轴可滚动、Y轴内容溢出可见的布局？

当给元素设置overflow-x: scroll时，CSS规范会强制将overflow-y: visible解析为auto（或scroll）——这是浏览器的默认行为，目的是避免内容溢出导致的布局异常。因此要实现X轴滚动同时Y轴内容溢出可见，必须绕开这个限制。

方案一：调整DOM结构，让下拉菜单脱离滚动容器裁剪上下文 #

核心思路是将横向滚动的选择器列表放在无overflow限制的容器内，外层套一个仅控制X轴滚动的容器，同时将下拉菜单的定位上下文提升到外层容器。

修改后代码 #

HTML

<div class="scroller-wrapper">
  <div class="scroller">
    <div class="select">
      <div class="selectLabel">Hello</div>
      <div class="selectOptions">
        Hello<br /> World
        <br /> And
        <br /> Stack
      </div>
    </div>
    <div class="select">
      <div class="selectLabel">Hello</div>
      <div class="selectOptions">
        Hello<br /> World
        <br /> And
        <br /> Stack
      </div>
    </div>
    <div class="select">
      <div class="selectLabel">Hello</div>
      <div class="selectOptions">
        Hello<br /> World
        <br /> And
        <br /> Stack
      </div>
    </div>
    <div class="select">
      <div class="selectLabel">Hello</div>
      <div class="selectOptions">
        Hello<br /> World
        <br /> And
        <br /> Stack
      </div>
    </div>
    <div class="select">
      <div class="selectLabel">Hello</div>
      <div class="selectOptions">
        Hello<br /> World
        <br /> And
        <br /> Stack
      </div>
    </div>
  </div>
</div>

CSS

.scroller-wrapper {
  max-width: 300px;
  position: relative; /* 作为下拉菜单的定位上下文 */
}

.scroller {
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
  padding: 16px 0;
}

.select {
  display: inline-block;
  position: static; /* 取消relative，让下拉菜单相对于wrapper定位 */
  box-sizing: border-box;
  width: 100px;
  margin-right: 16px;
}

.selectLabel {
  width: 100%;
  border: 1px solid #000;
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

.selectOptions {
  position: absolute;
  top: calc(100% + 16px); /* 对应scroller的padding-top */
  left: var(--select-offset-left); /* 用CSS变量存储选择器偏移量 */
  width: 100px;
  border: 1px solid #000;
  padding: 8px;
  box-sizing: border-box;
  background: #fff;
  display: none;
}

/* 点击标签显示下拉菜单 */
.selectLabel:active + .selectOptions,
.selectLabel:focus + .selectOptions {
  display: block;
}

辅助JS（设置选择器偏移量）

// 初始化时设置每个选择器的偏移
document.querySelectorAll('.select').forEach(select => {
  const offsetLeft = select.offsetLeft;
  select.style.setProperty('--select-offset-left', `${offsetLeft}px`);
});

// 滚动时更新偏移量
document.querySelector('.scroller').addEventListener('scroll', () => {
  document.querySelectorAll('.select').forEach(select => {
    const offsetLeft = select.offsetLeft;
    select.style.setProperty('--select-offset-left', `${offsetLeft}px`);
  });
});

方案二：fixed定位下拉菜单，JS计算位置 #

让下拉菜单完全脱离文档流，不受滚动容器裁剪影响，通过JS实时计算其位置：

修改后CSS #

/* 保留原有样式，仅修改.selectOptions */
.selectOptions {
  position: fixed;
  width: 100px;
  border: 1px solid #000;
  padding: 8px;
  box-sizing: border-box;
  background: #fff;
  display: none;
}

实现JS #

const labels = document.querySelectorAll('.selectLabel');

labels.forEach(label => {
  label.addEventListener('click', () => {
    const options = label.nextElementSibling;
    const rect = label.getBoundingClientRect();
    
    // 设置下拉菜单位置
    options.style.left = `${rect.left}px`;
    options.style.top = `${rect.bottom + 2}px`;
    options.style.display = options.style.display === 'block' ? 'none' : 'block';
    
    // 点击外部区域关闭
    document.addEventListener('click', (e) => {
      if (!label.contains(e.target) && !options.contains(e.target)) {
        options.style.display = 'none';
      }
    }, { once: true });
  });
});

方案三：纯CSS技巧（限固定高度场景） #

如果滚动容器高度固定，可通过设置足够的底部padding，让下拉菜单在容器内显示，无需裁剪：

.scroller {
  max-width: 300px;
  overflow-x: scroll;
  overflow-y: auto;
  white-space: nowrap;
  padding: 16px 0 200px; /* 底部padding足够放下拉菜单 */
  height: 60px; /* 固定高度仅包含选择器标签 */
}

该方法局限性大，仅适合下拉菜单高度固定的场景。

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