6

我需要有绝对定位的元素，它与它的父级一起滚动。绝对定位的元素可能比可滚动容器宽，在这种情况下，内容当前正在被剪裁。看来，结合overflow-y: auto;并overflow-x: visible;不起作用。

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

这就是它应该在这里的样子，只有滚动。

这可以通过CSS来实现吗？

4

4 回答 4

3

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

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

于 2015-05-21T19:39:34.197 回答
1

后代：这个问题确实需要一个 JavaScript 解决方案。最终，我正在处理的项目功能被更改以避免这个问题，并产生了更好的设计。

于 2012-12-19T21:10:36.227 回答
1

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

于 2015-05-21T20:00:51.570 回答
1

我在我的项目中找到了一个解决方案，通过隐藏水平滚动条（我使用自定义滚动条 ui），为容器提供 300px 的 padding-right 和 -300px 的 margin-right。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");
        }/>

以上是做什么的？它使得当你的鼠标进入正常的滚动视图区域时，指针事件被启用，让你点击里面的东西——但是当你的鼠标移动到特殊的“扩展”区域时，滚动视图鼠标事件是禁用，让您单击该区域后面的正常项目。

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

于 2017-04-19T02:40:29.210 回答