嵌套div，外部滚动，内部滚动被截断

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

（fiddle）

样本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; 
}

（颜色是用于说明目的）

来源

2013-07-18 Adam Batkin

其实它看起来像大事做火，如果你向右滚动......看看这个小提琴的http：// jsfiddle.net/danield770/6LSLu/ ...悬停也在右侧工作 – Danield

这是你想要的吗？ http://jsfiddle.net/tGkdn/3/ –

我只在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'; 
}

来源

2013-07-18 22:59:56 kalley

强制性jQuery的答案：

Working Example

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

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

来源

2013-07-18 23:02:32 apaul

嵌套div，外部滚动，内部滚动被截断

回答

相关问题