问题:我有一个 table
,它的包装 div
带有 overflow-y : auto
,一旦 table
获得焦点,滚动条就会跳起来。我怎样才能防止这种情况发生?
我在 IE9 中遇到过这种行为,在 Chrome 中没有。
请注意:我已将 tabindex
添加到表中,以便它可以获得焦点。单击它后,我会务实地专注于表格。
jsFiddle: http://jsfiddle.net/msdevs/r6TzS/4/
- 向下滚动表格
- 点击页面上的其他元素,使表格失去焦点
- 点击表格以关注它
- 滚动条向上跳
HTML:
<div>
<table id="tabl" tabindex="1">
<thead>
<tr>
<th style="font-weight: bold">head</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
</tr>
<tr>
<td>SEC</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
<tr>
<td>dsadfawdfadfa</td>
</tr>
.
.
.
<tr>
<td>dsadfawdfadfa</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
table-layout: fixed;
font-family: arial;
font-size: 11px;
text-align: left;
outline: none;
width: 625px;
}
div {
overflow-y: auto;
overflow-x: hidden;
height: 150px;
width: 300px
}
JS:
$('table').focusin(function (e) {
console.log("table got focus - scroller jumps up");
}).click(function () {
$('table').focus();
});
最佳答案
这为我解决了这个问题 - 记录包装器上的当前滚动位置,并在模糊时重新设置它。
$('#wrapper').scroll(function(){
$(this).data( {posY: $(this).scrollTop()} )
})
.blur(function(){
$(this).scrollTop( $(this).data("posY") );
})
关于javascript - IE中表格获得焦点时表格滚动条跳起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14979365/