Internet Explorer 11의 스크롤 속도 최적화

현재 첫 번째 열이 절대 가로이고 첫 번째 행이 절대 세로 인 일정 목록 형 응용 프로그램이 있습니다. 스크롤 효과를 잡아서 CSS 클래스의 왼쪽 또는 위쪽 속성을 변경하여이 작업을 수행하고 있습니다. (이 수업은 최대 700 개 항목 (매일 2 년)이 될 수 있습니다.Internet Explorer 11의 스크롤 속도 최적화

모든 브라우저에서 예상대로이 작동

$(window).scroll(function() { 
    $('.Planning tr > td:first-child').css("left", "" + $(this).scrollLeft() + "px"); 
    $('.Planning thead > tr:first-child').css("top", $(this).scrollTop()+50 + "px");     
});

(I 크롬, 파이어 폭스와 인터넷 익스플로러에서 테스트)하지만 인터넷 익스플로러에, 그것은 매우 느리다. 스크롤은 스크롤을 중지 한 후에 만 표시되는 반면 Chrome 및 Firefox에서는 맨 위 행이 고정되어있어 사용자에게 더 친숙 해 보입니다.

이것을 향상시킬 방법이 있습니까? 또는 IE에서 최적화 된 모든 라이브러리는 IE에서 "느린"동작을 피할 수 있습니까? jsfiddle 예를 들어

https://jsfiddle.net/7mfcrLh5/12/

(이 크롬에서 잘 작동하지만 인터넷 익스플로러에서)

출처

2016-09-01 Wouter Dumon

당신은 throttle에 스크롤 기능 100ms마다 또는 꽤 빨리 여전히 각 두 번째 200 밀리의 기능을 시도 할 수 있습니다.

var planningCol = $('.Planning tr > td:first-child'), 
    planningHead = $('.Planning thead > tr:first-child'); 

$(window).scroll(function(){ 
    var self = this; 

    throttle(function(){ 
     planningCol.css({ left: $(self).scrollLeft() }); 
     planningHead.css('top', $(self).scrollTop() + 50 + 'px'); 
    }(), 200); // call your function directly upon return 
});

또는 당신은 페이지 scrolled 또는 scrolling 때 감지, 몸에 CSS를 사용할 수 있습니다. 그런 다음 UI를 향상시키는 .scrolling { pointer-events: none !important; }을 적용하십시오.

또한 항상 동일한 경우 스크롤 기능 밖으로 선택 항목을 이동해보십시오.

는 제안처럼

출처

2016-09-01 14:12:42

안녕 팀이, 정보 주셔서 감사합니다, 내가 노력

var win = $(window), body = $(document.body), planning = $('.Planning'), planningCol = planning.find('tr > td').first(), planningHead = planning.find('thead > tr').first(); win.scroll(function(){ // scrolled body.toggleClass('scrolled', !!win.scrollTop()); // scrolling body.addClass('scrolling'); planningCol.css({ left: win.scrollLeft() }); planningHead.css({ top: win.scrollTop() }); setTimeout(function(){ body.removeClass('scrolling'); }, 200); });

(여러 열 몇 가지 이유 planningcol.css에 대한 ({}) 작동하지 않았다이 있기 때문에 planningCol의 좁은 방()를 변경했다 결국이 방법으로 작동하도록 만들었습니다. planningHead.css ("top", win.scrollTop() + 50 + "px"); 결국 인터넷 탐색기의 결과는 여전히 매우 불안정합니다. :/예를 들어 오른쪽에서 왼쪽으로 스크롤하면 왼쪽 열이 스크롤되지 않고 스크롤이 멈추고 왼쪽으로 설정 될 때까지 화면 중간에 나타납니다. –

그건 내가 두려워했던 것입니다. 첫 번째 단락 인 스로틀 기능을 사용하십시오. 엔. [단순 버전] (http://sampsonblog.com/749/simple-throttle-function)을 쉽게 구현할 수 있습니다. 내 글을 편집 할 수 있는지 보겠습니다. –

안녕하세요, 복사 된 링크에서 스로틀 기능을 복사했지만 내부의 코드가 실행되지 않습니다. (나는 그것을 console.log ("test")로 시도했지만 그 로그를 보지 못했다.) 그러나 스크롤 이벤트만으로 console.log를 로그하면 로그가 표시됩니다. 나는이 스로틀 기능에 여전히 오류가 있다고 생각한다. 비록 내가 올바른지 이해하면 인터넷 탐색기에서 '지연'느낌을 고칠 것이라고 매 200ms마다 실행되는 타이머를 구현합니다. –

Internet Explorer 11의 스크롤 속도 최적화

답변

관련 문제