jQuery CSS анимация дрожит при прокрутке

Question

jQuery CSS анимация дрожит при прокрутке

0

У меня есть этот внешний div, содержащий таблицу. Я хочу, когда я горизонтально прокручиваю внешний div, заголовок таблицы остается фиксированным. Я сделал это, создав новую таблицу, содержащую только заголовок, этот divheader является абсолютным положением слева: 0;

Когда внешняя прокрутка div, левая позиция divheader равна внешнему div scrollLeft.

$('#outerDiv').scroll(function () {
    var left = $('#outerDiv').scrollLeft();
    $('#divheader').css('left', left);                
});

Это очень хорошо работает на firefox, но на хроме, иногда вздрагивая, когда прокручивается быстро. На IE (10) он трясет все время.

Мои вопросы: как я могу избежать тряски на IE и хром.

Пожалуйста, рассмотрите этого скрипача: http://jsfiddle.net/Y7xZm/11/. Проверить его на IE

QuangTV 08 янв. 2014, в 05:27

Источник

0

Вы можете установить скрипку?
Shashank 08 янв. 2014, в 04:03
0

@Shashank Я уже добавил скрипку
QuangTV 08 янв. 2014, в 04:30

Теги:

jquery

css3

jquery-animate

1 ответ

Ещё вопросы

Mark S · Accepted Answer · 2014-01-08T02-40-00.000Z

Вместо установки left собственности на scroll(), то почему бы не установить #divheader позиции fixed.

См. Эту демонстрацию.

РЕДАКТИРОВАТЬ:

Он не может найти какой-либо метод, чтобы предотвратить дрожание/отрывистое #divheader на scroll() лучше, чем просто установить его position:fixed. Поэтому вместо этого я сделал решение, позволяющее прокручивать этот фиксированный элемент:

Сначала нам нужно обернуть таблицу #divheader на <div> и мы установим ее scrollTop() позиции scrollTop() значение #outerDiv scrollTop().

$('#outerDiv').scroll(function() {
    var top = $('#outerDiv').scrollTop();
    $('#headerWrapper').scrollTop(top);    
});

Затем нам нужно установить height этой обертки равной высоте #outerDiv чтобы она не переполнялась. Получение высоты #outerDiv немного сложно из-за полосы прокрутки. И лучшим решением, которое я придумал, является получение height элемента, установленного на 100% внутри #outerDiv.

//create a new element with height 100% inside the '#outerDiv'
var p = $('<p style="height: 100%;"/>');
$('#outerDiv').append(p);
//get the elements height then remove it
var h = p.height();
$(p).remove();
//set the wrapper height
$('#headerWrapper').height(h);

Вот jsfiddle.

Я бы с удовольствием. проблема в том, что у меня ограниченная высота для внешнего div, и иногда мне приходится прокручивать вниз, когда стол длинный
да я вижу. Я обновил свой ответ, и я думаю, что нет ничего более плавного, чем установка position:fixed поэтому вместо этого я решил, что вы также сможете прокрутить этот фиксированный элемент вниз.
Отлично, благодаря вам я исправил проблемы. Я создал обертку, чтобы обернуть ее. И вместо того, чтобы изменить левое положение стола, теперь я изменяю поле слева. Большое спасибо Марк!