자바 스크립트에서 IFrame을 아래로 올바르게 스크롤하는 방법

Roelof van den Berg

웹 사이트 상호 작용 연구에 사용되는 mockup-webpage의 경우 JavaScript를 사용하여 mockup message-stream을 만들었습니다. 이 메시지 스트림은 IFrame에로드되며 미리 설정된 간격으로 이미지를 표시하고 페이지 하단에 새 이미지를 배치 한 후 페이지 하단으로 스크롤해야합니다. 이미지를 표시하는 것은 제공된 스크립트를 사용하면 매우 잘 작동합니다. 그러나 Chrome과 IE 모두 페이지를 맨 아래로 스크롤하는 데 문제가있는 것 같습니다. 이미지가 첨부 되 자마자 페이지 하단으로 스크롤하고 싶지만, 가끔 작동하는 것처럼 보였기 때문에 지금은 5ms 지연을 추가했습니다. 내 질문은 다음과 같습니다.

  • 이 목적으로 document.body.scrollHeight를 사용해도됩니까?
  • 스크롤이 직접 발생하도록 할 수 있습니까? 아니면 스크롤하기 전에 약간의 간격이 필요합니까?
  • 이미지를 추가 한 후 바로 코드가 IFrame 하단으로 스크롤되도록하는 방법은 무엇입니까?

다음 함수가 사용되며 trypost ()가 onLoad에서 시작됩니다.

function scrollToBottom(){
  window.scrollBy(0,document.body.scrollHeight);
}

function trypost(){
  point = point + 1;
  if(point < interval.length){
    //create and append a new image
    var newImg = document.createElement("IMG");
    newImg.src = "images/"+images[point]+".png";
    document.getElementById('holder').appendChild(newImg);
    //create and append a return
    var br = document.createElement("br");
    document.getElementById('holder').appendChild(br);
    //time scroll to bottom (after an arbitrary 5 seconds)
    var stb = window.setTimeout(scrollToBottom, 5);
    //time next post
    var nextupdate = interval[point]*400;
    var tp = window.setTimeout(trypost, nextupdate);
  }
}

내 스크립트 섹션에는 최소한 다음 변수가 포함되어 있습니다.

var point = -1;
var interval = [10, 10, 15];
var images = ["r1", "a1", "r2"];

이 질문은 IE에서 setTimeout을 올바르게 사용하는 방법에 설명 된 프로젝트의 연속입니다 .

토마스 어반

아래쪽으로 스크롤하는 것은 항상 엄청나게 큰 위쪽 오프셋 (예 :)으로 스크롤하는 것과 같습니다 999999.

iframe.contentWindow.scrollTo( 0, 999999 );

또한이 게시물을 참조하십시오 : 자바 스크립트로 iframe 스크롤?

스크롤이 너무 일찍 발생하면 이미지가 아직로드되지 않았기 때문일 수 있습니다. 따라서 추가 된 이미지 를 배치 하지 않고로드하자마자 스크롤해야 합니다 . 더하다

newImg.onload = function() { triggerScrolling(); };

생성 후 newImg속성을 할당하기 전에 src.

스크롤을 트리거하는 데 여러 이벤트가 필요한 경우 "이벤트 수집기"를 사용해야 할 수 있습니다.

function getEventCollector( start, trigger ) {
    return function() {
        if ( --start == 0 ) { trigger(); )
    };
}

그런 다음 다음과 같이 사용할 수 있습니다.

var collector = getEventCollector( 2, function() { triggerScrolling(); } );
newImg.onload = collector;
window.setTimeout( collector, 100 );

이 방법 triggerScrolling()은 적어도 100ms 후에 호출 되며 이미지가로드 된 후에는 collectortriggerScrolling ()이 결국 호출되도록 두 번 호출해야합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

슬래시와 아포스트로피를 자바 스크립트로 올바르게 바꾸는 방법

분류에서Dev

체크 표시 및 버튼에 대한 자바 스크립트 기능을 올바르게로드하는 방법은 무엇입니까?

분류에서Dev

내 스크립트에서 공백이 포함 된 문자열을 올바르게 대체하는 방법

분류에서Dev

사용자 정의 스크립트에서 nohup 명령을 올바르게 사용하는 방법

분류에서Dev

자바 스크립트에서 아래로 스크롤하는 버그

분류에서Dev

자바 스크립트에서 ID로 체크 박스 값을 얻는 방법

분류에서Dev

자바 스크립트에서 ID로 체크 박스 값을 얻는 방법

분류에서Dev

형식을 행 [[에서 [자바 스크립트로 변경하는 방법]

분류에서Dev

타사 스크립트에서 가져온 js 모듈을 올바르게 호출하는 방법

분류에서Dev

자바 스크립트로 이미지를 올바르게 전환하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 <a> 태그를 올바르게 사용하는 방법 (href 링크 없음)

분류에서Dev

스크린 리더로 C #을 올바르게 발음하는 방법

분류에서Dev

마우스 바로 아래의 QGraphicsView에 위젯을 올바르게 놓는 방법은 무엇입니까?

분류에서Dev

어떤 방법이 자바 스크립트에서 다른 방법을 호출하는지 아는 방법

분류에서Dev

어떤 방법이 자바 스크립트에서 다른 방법을 호출하는지 아는 방법

분류에서Dev

자바 스크립트에서 행을 추가하는 방법

분류에서Dev

자바 스크립트에서 Blob을 복제하는 방법

분류에서Dev

마크 업을 올바르게 추가하지 않는 자바 스크립트 프로그램

분류에서Dev

자바 스크립트로 Json을 올바르게 구문 분석

분류에서Dev

vim-화면을 바인딩하는 방법 아래로 스크롤 명령

분류에서Dev

reactjs와 함께 작동하도록 자바 스크립트에서 div 탭을 올바르게 만드는 방법

분류에서Dev

재귀 자바 스크립트 호출에서 return 문을 올바르게 설정하는 방법은 무엇입니까?

분류에서Dev

UITableViewCell 값을 문자열로 올바르게 캐스팅하는 방법

분류에서Dev

jquery없이 자바 스크립트로 무한 스크롤을 수행하는 방법

분류에서Dev

이 자바 스크립트를 올바르게 통합하는 방법

분류에서Dev

C ++에서 쉘 스크립트를 올바르게 실행하는 방법

분류에서Dev

C #을 사용하여 BHO에 자바 스크립트 삽입-문자열을 올바르게 이스케이프하는 방법

분류에서Dev

테이블에서 행을 위아래로 이동하고 자바 스크립트를 사용하여 새 div에 행 내용을 표시하는 방법

분류에서Dev

자바 스크립트에서 getJSON 함수를 올바르게 사용하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    슬래시와 아포스트로피를 자바 스크립트로 올바르게 바꾸는 방법

  2. 2

    체크 표시 및 버튼에 대한 자바 스크립트 기능을 올바르게로드하는 방법은 무엇입니까?

  3. 3

    내 스크립트에서 공백이 포함 된 문자열을 올바르게 대체하는 방법

  4. 4

    사용자 정의 스크립트에서 nohup 명령을 올바르게 사용하는 방법

  5. 5

    자바 스크립트에서 아래로 스크롤하는 버그

  6. 6

    자바 스크립트에서 ID로 체크 박스 값을 얻는 방법

  7. 7

    자바 스크립트에서 ID로 체크 박스 값을 얻는 방법

  8. 8

    형식을 행 [[에서 [자바 스크립트로 변경하는 방법]

  9. 9

    타사 스크립트에서 가져온 js 모듈을 올바르게 호출하는 방법

  10. 10

    자바 스크립트로 이미지를 올바르게 전환하는 방법은 무엇입니까?

  11. 11

    자바 스크립트에서 <a> 태그를 올바르게 사용하는 방법 (href 링크 없음)

  12. 12

    스크린 리더로 C #을 올바르게 발음하는 방법

  13. 13

    마우스 바로 아래의 QGraphicsView에 위젯을 올바르게 놓는 방법은 무엇입니까?

  14. 14

    어떤 방법이 자바 스크립트에서 다른 방법을 호출하는지 아는 방법

  15. 15

    어떤 방법이 자바 스크립트에서 다른 방법을 호출하는지 아는 방법

  16. 16

    자바 스크립트에서 행을 추가하는 방법

  17. 17

    자바 스크립트에서 Blob을 복제하는 방법

  18. 18

    마크 업을 올바르게 추가하지 않는 자바 스크립트 프로그램

  19. 19

    자바 스크립트로 Json을 올바르게 구문 분석

  20. 20

    vim-화면을 바인딩하는 방법 아래로 스크롤 명령

  21. 21

    reactjs와 함께 작동하도록 자바 스크립트에서 div 탭을 올바르게 만드는 방법

  22. 22

    재귀 자바 스크립트 호출에서 return 문을 올바르게 설정하는 방법은 무엇입니까?

  23. 23

    UITableViewCell 값을 문자열로 올바르게 캐스팅하는 방법

  24. 24

    jquery없이 자바 스크립트로 무한 스크롤을 수행하는 방법

  25. 25

    이 자바 스크립트를 올바르게 통합하는 방법

  26. 26

    C ++에서 쉘 스크립트를 올바르게 실행하는 방법

  27. 27

    C #을 사용하여 BHO에 자바 스크립트 삽입-문자열을 올바르게 이스케이프하는 방법

  28. 28

    테이블에서 행을 위아래로 이동하고 자바 스크립트를 사용하여 새 div에 행 내용을 표시하는 방법

  29. 29

    자바 스크립트에서 getJSON 함수를 올바르게 사용하는 방법은 무엇입니까?

뜨겁다태그

보관