如何实现内容可滚动且隐藏scrollbar，同时显示overflow:hidden下的绝对定位元素？

我明白你的痛点——既要让侧边栏内容能滚动、藏起滚动条，又要让那些红色虚线的关联框能突破容器显示出来对吧？这问题的根源在于overflow属性的裁剪规则：只要元素的包含块在设置了overflow:hidden/scroll的容器内，哪怕是绝对定位元素，超出容器边界的部分都会被裁剪，z-index在这里起不到作用，因为这是容器的裁剪特性，不是层级问题。

下面给你两种实用的解决方案：

方法一：将关联框移出滚动容器（推荐） #

把红色虚线的.sidebar-element__linked-div从滚动容器内部挪出来，放到和.sidebar-container同级的位置，这样它就不受滚动容器的overflow限制了，再通过定位让它和对应的侧边栏元素对齐。

修改后的HTML结构 #

<div class="body">
  <div class="sidebar-container">
    <div class="sidebar-container_hidden-scroll">
      <div class="sidebar-element" data-item="flower-1">
        <div class="sidebar-element__name"> Yellow flower </div>
        <div class="sidebar-element__capacity"> 10 kg </div>
      </div>
      <div class="sidebar-element" data-item="flower-2">
        <div class="sidebar-element__name"> Yellow flower </div>
        <div class="sidebar-element__capacity"> 10 kg </div>
      </div>
      <div class="sidebar-element" data-item="flower-3">
        <div class="sidebar-element__name"> Yellow flower </div>
        <div class="sidebar-element__capacity"> 10 kg </div>
      </div>
      <div class="sidebar-element" data-item="flower-4">
        <div class="sidebar-element__name"> Yellow flower </div>
        <div class="sidebar-element__capacity"> 10 kg </div>
      </div>
    </div>
  </div>
  <!-- 把关联框放到滚动容器外面 -->
  <div class="sidebar-element__linked-div" data-target="flower-1"></div>
  <div class="sidebar-element__linked-div" data-target="flower-2"></div>
  <div class="sidebar-element__linked-div" data-target="flower-3"></div>
  <div class="sidebar-element__linked-div" data-target="flower-4"></div>
  <div class="main-container"> </div>
</div>

调整CSS #

.body { 
  display:flex; 
  width: 100%; 
  height: 100%;
  position: relative; /* 让关联框的绝对定位以body为参考 */
}
.main-container { 
  background-color: #eee; 
  width: 560px; 
  height: 500px; 
}
.sidebar-container { 
  width: 270px; 
  height: 100px; 
  overflow-y: hidden; 
}
.sidebar-container_hidden-scroll { 
  width: 100%; 
  height: 100%; 
  overflow-y: scroll; 
  padding-right: 20px;
}
/* 隐藏WebKit浏览器的滚动条 */
.sidebar-container_hidden-scroll::-webkit-scrollbar {
  width: 0;
}
.sidebar-element { 
  width: 250px; 
  height: 44px; 
  position: relative; 
  box-sizing: border-box; 
  margin: 10px 5px; 
  padding: 5px; 
  border: 1px solid red 
}
.sidebar-element__linked-div { 
  position: absolute; 
  height: 44px;
  width: 500px; 
  border: 1px dotted red; 
  left: calc(270px + 30px); /* 侧边栏宽度 + 间距 */
}

补充JS定位逻辑 #

你需要写一小段JS，监听滚动容器的滚动事件，或者获取每个.sidebar-element的位置，动态设置对应关联框的top值，确保它们始终对齐：

const scrollContainer = document.querySelector('.sidebar-container_hidden-scroll');
const elements = document.querySelectorAll('.sidebar-element');
const linkedDivs = document.querySelectorAll('.sidebar-element__linked-div');

function updateLinkedDivPositions() {
  elements.forEach((el, index) => {
    const rect = el.getBoundingClientRect();
    const containerRect = scrollContainer.getBoundingClientRect();
    // 计算相对于body的top值
    linkedDivs[index].style.top = `${rect.top - containerRect.top + scrollContainer.scrollTop}px`;
  });
}

// 初始化和滚动时更新
updateLinkedDivPositions();
scrollContainer.addEventListener('scroll', updateLinkedDivPositions);

方法二：调整滚动容器的overflow规则 #

如果不想改动HTML结构，可以修改滚动容器的overflow设置，只限制垂直方向的滚动，放开水平方向的裁剪，同时用内部元素的宽度来控制水平内容的范围。

修改后的CSS #

.sidebar-container { 
  width: 270px; 
  height: 100px; 
  overflow-y: hidden; /* 只限制垂直方向 */
}
.sidebar-container_hidden-scroll { 
  width: 100%; 
  height: 100%; 
  overflow-y: scroll; 
  padding-right: 20px;
  /* 去掉overflow-x:hidden，不限制水平方向 */
}
/* 给滚动容器的直接子元素设置宽度，防止内容水平溢出 */
.sidebar-container_hidden-scroll > div {
  width: 250px;
}
/* 其他样式保持不变 */

这个方法的原理是：滚动容器只在垂直方向裁剪内容，水平方向允许内容溢出，所以绝对定位的.sidebar-element__linked-div就能突破容器显示出来，同时垂直滚动和隐藏滚动条的效果依然生效。

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