Question

我需要有一个绝对定位的元素，它与其父元素一起滚动。绝对定位的元素可以比可滚动容器宽，在这种情况下，内容当前被剪切。结合overflow-y: auto;和overflow-x: visible;似乎不起作用。

这是一个JSFiddle来说明问题。请注意，弹出窗口会导致水平滚动。

这就是它应该看起来像here，只有滚动。

这可以通过CSS完成吗？

Answer 1

您有一个硬编码宽度。 <div>会自动占据页面的整个宽度，因此您要做的是限制div可以包含的最大宽度，因此将width: 400px更改为max-width: 90%

这是一个JSFiddle示例：http://jsfiddle.net/c8DdL/3/

Answer 2

对于后人：问题确实需要JavaScript解决方案。最终，我正在研究的项目功能已经改变，以避免出现这个问题并导致更好的设计。

Answer 3

使用max_width而不是宽度400.这是唯一的解决方案。

Answer 4

我在项目中找到了一个解决方案，隐藏了水平滚动条（我使用自定义滚动条ui），给容器一个300px的右边距和-300px的边距右边。 padding和-margin使得正常的孩子们对齐相同，除非在绝对定位的元素延伸出该区域的情况下容器中还有额外的空间。（可滚动区域切断了外边界以外的任何东西）

当然，如果您在滚动区域右侧有内容，则会将其延伸到其上。透明的背景不是视觉问题;然而它会阻止鼠标事件。

为了解决这个问题，我添加了两个元素作为滚动视图的兄弟，如下所示：

// this outer container resizes to match the size of scrollContainer
<div style={{position: "relative"}>
    <div id="scrollContainer" style={{paddingRight: 300, marginRight: -300}}>
        // stuff which might extend to the right
    </div>

    // the containers below resize with the outer container
    // however, notice that the 2nd one is positioned only over the possibly-extended-onto area

    <div id="insideArea" style={{position: "absolute", left: 0, right: 0, top: 0, bottom: 0}}
        onMouseEnter={()=> {
            // we're back inside, so enable scroll-container mouse-events
            $("scrollContainer").css("pointer-events", "auto");

            // prevent self from blocking mouse events for scrollContainer
            $("insideArea").css("display", "none");

            // re-enable extend-area div, so we know when mouse moves over it
            $("extendArea").css("display", "block");
        }/>

    <div id="extendArea" style={{position: "absolute", top: 0, bottom: 0, left: "100%", width: 300}}
        onMouseEnter={()=> {
            // we're over the extend-area, so disable scroll-container mouse events
            $("scrollContainer").css("pointer-events", "none");

            // prevent self from blocking mouse events for behind-extend-area elements
            $("#extendArea").css("display", "none");

            // re-enable inside-area div, so we know when mouse moves over it
            $("#insideArea").css("display", "block");
        }/>

以上是做什么的？当你的鼠标进入正常的滚动视图区域时，它就会启用，启用指针事件，让你点击内部的东西 - 但当你的鼠标进入特殊的＆＃34;扩展＆＃34;区域，滚动视图鼠标事件被禁用，让您单击该区域后面的正常项目。

此解决方案可能永远不会被其他人使用，但我花了足够的时间找到它，我还以为我分享了它！

在一个方向上可见溢出，向另一个方向滚动

4 个答案: