1

ネストされた s がいくつかあり<div>ます。外側<div>にはoverflow-x: scrollがあり、内側には長いテキストがあります (折り返したくない)。問題は、「内側」<div>が実際にはスクロール領域に拡張されないことです。たとえば、click各 inner にバインドされたイベント<div>がある場合、右にスクロールしてどこかをクリックしても、そのイベントは発生しません。私のサンプルでは、​​赤い領域は内側<div>の s の一部であり、青い領域はそうではありません (したがって、青い領域のどこをクリックしても発火しません)。

(フィドル)

サンプル HTML:

<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>

そしていくつかの単純な CSS:

.outer {
    width: 15ex;
    overflow-x: scroll;
    background-color: blue;
}

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

（色はイメージです）

4

2 に答える 2

4

Chromeでのみこれを試しましたが、うまくいきました：

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

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

クロスブラウザーではない場合に備えて、ここに投稿します。

var inner = document.querySelectorAll('.inner');
for ( var i = 0, l = inner.length; i < l; ++i ) {
    inner[i].style.width = inner[i].parentNode.scrollWidth + 'px';
}
于 2013-07-18T22:59:56.453 に答える
0

必須の jQuery の回答:

実施例

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

    $('.inner').click(function () {
        $(this).css('background', 'green');
    });
});
于 2013-07-18T23:02:32.320 に答える