Question

我有一些嵌套的<div>。外部<div>有overflow-x: scroll，内部有长文本（我不想包装）。问题是“内部”<div>实际上并没有扩展到滚动区域。例如，如果我有一个绑定到每个内部click的{{1}}事件，那么如果您向右滚动并单击那里的任何地方，该事件就不会触发。在我的示例中，红色区域是内部<div>的一部分而蓝色区域不是（因此蓝色区域中的任何位置都不会触发）。

（fiddle）

示例HTML：

<div>

还有一些简单的CSS：

<div class="outer">
    <div class="inner">one long element right here</div>
    <div class="inner">two long element right here</div>
    <div class="inner">three long element right here</div>
</div>

（颜色仅供参考）

Answer 1

我只是在Chrome中试过这个，但它确实有效：

.inner {
    background-color: red;
    white-space: nowrap;
    display: table-row;
}

http://jsfiddle.net/tGkdn/5/

我几乎只是给了你一个javascript修复，我将在这里发布，以防万一没有跨浏览器。

var inner = document.querySelectorAll('.inner');
for ( var i = 0, l = inner.length; i < l; ++i ) {
    inner[i].style.width = inner[i].parentNode.scrollWidth + 'px';
}

Answer 2

强制jQuery回答：

<强> Working Example

$(function () {
    $('.outer').scroll(function () {
        $('.inner').width($('.outer').width() + $('.outer').scrollLeft());
    });

    $('.inner').click(function () {
        $(this).css('background', 'green');
    });
});

嵌套的div，外部的溢出滚动，内部的一个被截断

2 个答案: