滚动条：overflow-y: scroll，同时overflow-x: visible

Question

滚动条：overflow-y: scroll，同时overflow-x: visible

7

一个垂直可滚动的列表中是否可能出现水平溢出的项目？

我在这里有一个CodePen示例：

var $item = $('#1'),
  $button = $('.button');

$button.on("click", function() {
  $item.toggleClass('addMargin');
});

.sidenav {
  width: 300px;
  background-color: grey;
  position: fixed;
  padding: 20px;
}
.addMargin {
  margin-left: 60px;
}
.item {
  width: 100%;
  overflow-y: auto;
  height: 100vh;
  z-index: 5;
  position: relative;
}
.sub-item {
  transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22);
  background-color: orange;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
  z-index: 10;
  position: relative;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
  <button class="button">test</button>
  <div class="item">
    <div id="1" class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
</div>

在这个例子中，我希望黄色项目在列表中突出显示。这不是关于滚动条可见性的问题。有什么建议吗？使用CSS / JavaScript？谢谢！

- Bas Kuipers

4

@SeanLeBlanc，OP的问题是询问一个元素在y轴设置为overflow scroll时是否可以沿x轴溢出。你发布的重复内容是完全不同的问题... - Hunter Turner

@HunterTurner 在我引用的问题中给出的答案解释了为什么显而易见的解决方案（即 overflow-x:visible; overflow-y:auto;）不起作用，并提供了一些解决方法。在这种情况下，只是通过评论附上问题链接会更好吗？ - Sean LeBlanc

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zachary Wand · Accepted Answer

阅读完https://dev59.com/NWw15IYBdhLWcg3wv-VM#6433475后，似乎答案是否定的。您需要设置overflow-x: visible，但由于您已经设置了overflow-y，则它被视为auto，这会隐藏内容。

这可能并不能完全解决您的问题，但如果您添加以下内容： margin-right: -100px; padding-right: 100px; 到.item，您可以移动滚动条，并在框内提供更多溢出空间。这是我能想到的最接近解决方案。