$('#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. Он принимает только преобразование, а не префиксы.
Я обрабатываю событие прокруткив реакции на приложение. на основе позиции прокрутки мне нужно применить стили преобразования к заголовку таблицы, чтобы сделать его в фиксированной позиции.но преобразование не работает в IE. Ниже приведен код для понимания.Я использую ссылки для добавления прослушивателей событий в селектор.