Overflow-y:使用overflow-x: visible滚动

Question

有没有可能让一个项目水平溢出出一个垂直滚动的列表？

我在这里有一个codepen示例：

http://codepen.io/baskuipers/pen/GqQYRJ

​

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？

谢谢!

Answer 1

在阅读了https://stackoverflow.com/a/6433475/4386196之后，答案似乎是不，这是不可能的。您需要设置overflow-x: visible，但由于您设置了overflow-y，因此它将被视为隐藏内容的auto。

这可能不能完全解决您的问题，但如果您添加：

margin-right: -100px; padding-right: 100px;

要使用.item，您可以移动滚动条并在框中为溢出留出更多空间。我能找到最接近的解决方案。