$('#scrollContent').addEventListener('scroll', () => {
let translate = 'translate(0,' + $('#scrollContent').scrollTop + 'px)';
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function () {
$('thead').css({ 'transform': translate, '-webkit-transform': translate, '-moz-transform': translate, '-ms-transform': translate, '-o-transform': translate });
}, 150);
}, false);
#scrollContent{
height:150px;
overflow:auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='scrollContent' ref='scrollContent'><table >
<thead>
<th><td>name</td></th>
<th><td>age</td></th>
<th><td>Dob</td></th>
<th><td>address</td></th>
<thead>
<tbody>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
<tr>
<td>suresh</td>
<td>21,</td>
<td>2010</td>
<td>hyderabad</td>
</tr>
</tbody>
</table>
</div>
转换前缀在IE中不适用。它仅使用不带前缀的转换。
我正在处理react应用程序中的滚动事件。基于滚动位置,我需要将变换样式应用于表标题以使其固定在某个位置。但是转换不能在IE中使用。下面给出的代码只是出于理解的目的。我正在使用ref将事件侦听器添加到选择器。