использование прокрутки jquery для проблем ie11 с дрожащими элементами

Я только что столкнулся со странной проблемой на ie11. Я пытаюсь создать фиксированный элемент, который будет прокручиваться вместе с прокруткой окна.

$(window).scroll(function() {
    var scrollY=$(this).scrollTop();
    $('.myelem').css('transform', 'translateY(' + scrollY + 'px)');
});

Я также создал скрипт этого:

https://jsfiddle.net/fyngwnz6/1/

(Это для воспроизведения проблемы, я знаю, что этот конкретный случай можно решить с помощью фиксированного элемента)

Код работает безупречно, без проблем с производительностью во всех браузерах, кроме ie11. При использовании полосы прокрутки элемент myelem прокручивается с небольшим дрожанием, которое становится более очевидным при использовании колесика мыши. Однако, где вы действительно можете увидеть проблему, так это при использовании кнопок полосы прокрутки. Кажется, что рендеринг прокрутки должен завершиться, чтобы js мог отслеживать прокрутку.

Я видел, что были проблемы с ie11 и плавной прокруткой, но здесь это не так. Есть ли какое-то решение для этого? Я что-то упускаю?

редактировать: хотя у меня есть ответ, который, кажется, решает проблему, на самом деле то, что я ищу, - это решение для элементов, к которым применяется overflow: hidden, и прокрутка берется из переполненного элемента, а не прокрутки тела; аналогичный сценарий можно найти здесь:

http://www.fixedheadertable.com/

Если в примере включен «фиксированный столбец», то нажатие на полосы прокрутки показывает рывки в движении.


javascript jquery internet-explorer-11 smooth-scrolling
person scooterlord    schedule 15.04.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, что добавление height: 100%; и overflow: auto; к элементам html, body устраняет проблему IE 11:

Демонстрация JsFiddle

[Изменить]: добавление margin: 0; удаляет двойные полосы прокрутки.

person urbz    schedule 15.04.2015
comment
добавление margin:0 и padding:0 отключило дополнительную полосу прокрутки jsfiddle и, кажется, решает проблему, но не в моем конкретном коде. Позвольте мне потратить некоторое время на это и вернуться к вам - person scooterlord; 15.04.2015
comment
Как бы я воспроизвел аналогичный код, если речь идет не о теле при прокрутке, а о прокрутке элемента? Это похоже на очень специфический взлом.. ? Я имею в виду, есть ли какое-то объяснение, ПОЧЕМУ это работает? - person scooterlord; 15.04.2015
comment
Отлично, это помогло. Если я вас правильно понял, повторить это, скажем, для div, работающего как контейнер, содержащий дочерний элемент, который должен следовать при прокрутке внутри? Я бы сказал, что те же самые правила сохраняются, но я думаю, что свойство height является ключевым здесь. И трудно сказать, как можно воспроизвести это на странице с множеством элементов и разными атрибутами CSS. - person urbz; 15.04.2015
comment
Я обновил исходное описание, отредактировав его, если у вас есть свободное время, загляните сюда. - person scooterlord; 15.04.2015

arrow_upward
2
arrow_downward

для использования на краю:

/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) 
{
    html{
        overflow: hidden;
        height: 100%;       
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative
    }
}
person Peter O Brien    schedule 20.05.2018