容器滚动尽管隐藏滚动条

Question

我有一个只能水平滚动的旋转木马。旋转木马中的项目在悬停时缩放，这使得它们比容器大，并且反过来允许垂直滚动，尽管容器具有css propery overflow-y: hidden;。旋转木马高度应符合其儿童初始状态的高度，不能明确设置。可以在此处找到示例JSFiddle.

如果内容增长，我怎样才能完全禁用垂直滚动？

＆＃13;

＆＃13;

#carousel {
  overflow-y: hidden;
  white-space: nowrap;
  background: teal;
  width: 300px;
  /* height: 0;
  min-height: 100%;
  max-height: 100%; */
}

#carousel > div {
  height: 100px;
  width: 100px;
  display: inline-block;
}
#carousel > div:hover {
  transform: scale(1.2);
}

#carousel > div:nth-child(even) {
  background: red;
}

#carousel > div:nth-child(odd) {
  background: blue;
}

＆＃13;

<div id="carousel">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改 在Chrome 63，Ubuntu 17.10中为我添加了.gif

Answer 1

尝试设置overflow-y：隐藏到主体：

html, body{
  overflow-y: hidden;
}

https://jsfiddle.net/qvtp2ud7/1/

如果您希望body能够滚动Y，请尝试专门为子项设置overflow属性：

https://jsfiddle.net/qvtp2ud7/2/

但似乎缓存问题不仅仅是溢出行为。清除缓存，尝试使用不同的浏览器并根据需要更新您的浏览器，也许您的版本有一些小问题。