【问题标题】:Possible to have scrollable div with children able to overflow: visible?可能有可滚动的 div 与孩子能够溢出:可见?
【发布时间】:2014-06-12 13:36:01
【问题描述】:

我正在为一个包含缩略图的网站制作一个可滚动的侧边菜单。我一直试图在悬停时让图像“溢出:可见”,因此在放大时图像不会被容器截断。

棘手的部分是,我希望保持垂直滚动的可能性(从而禁用溢出:可见)。任何建议/黑客如何解决这个问题?我还没有找到可行的解决方案:(

这是代码:http://codepen.io/anon/pen/lwaGv

【问题讨论】:

  • 你的问题有点不清楚。为什么你需要禁用溢出:可见才能垂直滚动?
  • 抱歉不清楚,让我试着澄清一下:) 为了能够在 div 中垂直滚动,我需要设置 overflow-y: auto/scroll 或 overflow: auto/scroll 但然后放大时图像被截断。

标签: css scroll overflow transform


【解决方案1】:

W3C 规范:

'overflow-x' 和 'overflow-y' 的计算值与其指定的值相同,除了某些与 'visible' 的组合是不可能的:如果一个被指定为 'visible' 而另一个是“滚动”或“自动”,然后“可见”设置为“自动”。如果‘overflow-y’相同,‘overflow’的计算值等于‘overflow-x’的计算值;否则它是“overflow-x”和“overflow-y”的计算值对。 :(

我也尝试了 z-indeximportant 规则,但都失败了。这是你需要的吗?

http://i.stack.imgur.com/9uYOC.png

编辑

也许你可以看看这个。我使用多个 div 制作它并固定了 div 的宽度,这样它们就不会在鼠标悬停时裁剪照片。您可以调整容器的高度。容器的背景可以设置为透明。

http://codepen.io/anon/pen/pIEih

PS:如果需要滚动条,则内部(可滚动)div 需要具有一定的宽度,以便在照片尺寸增加(悬停)时能够容纳照片。同样需要调整外部div的宽度。

codepen.io/anon/pen/fhyAa

【讨论】:

    猜你喜欢
    • 2012-07-09
    • 1970-01-01
    • 2011-07-09
    • 1970-01-01
    • 1970-01-01
    • 2015-08-24
    • 1970-01-01
    • 1970-01-01
    • 2011-04-02
    相关资源
    最近更新 更多