javascript - 溢出-x : scroll and overflow-y: visible alternative

Question

我有一个正在渲染图像的列表(水平滚动):

<div id="my-cool-wrapper">
  ...
  // My cool wrapper has more elements (apart from list)

  <ul id="the-list" style="display: flex; flex-direction: row; overflow-x: scroll;">
    <li>
      <img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
    </li>

    <li>
      <img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
    </li>

    <li>
      <img src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
    </li>
  </ul>
</div>

我想 transform: scale(1.5)用户交互的图像(例如点击、悬停等)。
问题:

图像不会溢出到父级之外。我希望图像在增长时完全可见(即使它在列表的高度之外)。

我以为我可以通过设置 overflow-y: visible 来实现这一点至 #the-list .然而，根据 CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue线程这是不可能的。
有没有其他方法可以实现我想要的？
更新:
JSFiddle 可用于演示该问题: http://jsfiddle.net/f7vdebt2/
我想要 <ul> 的内容能够扩展到其父边界之外。

Answer 1

这实际上是一个复杂的long-standing problem .仅用 CSS 解决它是不可行的。
诀窍是从静态上下文中提取事件元素，并在悬停时强制将其固定到视口(viewport)。我试图将其归结为一个最小的可重现示例，但我越是破解它，我遇到的怪癖就越多。使用固定的图像尺寸，您可以使用漂亮的 minimal amount of scripting 来完成此操作。但是有一些可用性问题，我修复的越多，代码就越复杂。
最终，我最终做的是publishing一个自动处理所有这些的自定义元素。
使用它非常简单:

over-scroll {
  width: 50%;
  margin: 3rem auto;
}

pop-out img {
  height: 100px;
  width: auto;
}

<script type="module" src="https://bes.works/bits/bits/pop-out.js"></script>
<over-scroll>
  <pop-out><img src="https://picsum.photos/720/480"></pop-out>
  <pop-out><img src="https://picsum.photos/480/720"></pop-out>
  <pop-out><img src="https://picsum.photos/500/500"></pop-out>
  <pop-out><img src="https://picsum.photos/640/480"></pop-out>
</over-scroll>

或者您可以将元素类导入脚本并以编程方式创建它们:

import { OverScrollElement, PopOutElement } from './pop-out.js';

let overScroll = new OverScrollElement();
let popOut = new PopOutElement();
popOut.innerHTML = `<h1> Hello! </h1>`;
overScroll.append(popOut);
document.body.append(overScroll);

存储库中包含一个测试页和一个 live demo在我的网站上有更多的例子。这应该对您有用，但如果您需要任何调整以适应您的特定用例，请告诉我。