scrollIntoView의 사용 예

DOM 스크롤

DOM 사양은 각 브라우저가 구현해야 하는 스크롤 페이지 영역의 종류를 규정하지 않습니다. 각 브라우저는 해당 방법을 구현했으며 다양한 방법을 사용하여 페이지 영역 스크롤을 제어할 수 있습니다. 이러한 메서드는 HTMLElement 유형의 확장으로 존재하므로 모든 요소에서 사용할 수 있습니다.

1.scrollIntoView(alignWithTop) 현재 요소가 현재 창의 가시 범위에 표시되도록 브라우저 창이나 컨테이너 요소를 스크롤합니다. alignWithTop이 true이거나 생략되면 창은 자체 상단이 요소 상단과 같은 높이가 될 때까지 가능한 한 많이 스크롤됩니다. -------현재 모든 브라우저는

2를 지원합니다. scrollIntoViewIfNeeded(alignCenter) 현재 요소가 창의 가시 범위 내에 표시되지 않는 경우에만 브라우저 창 또는 컨테이너 요소가 스크롤되고 현재 요소가 표시됩니다. 결국 눈에 띄게 됩니다. 현재 요소가 뷰포트에 표시되는 경우 이 메서드는 아무 작업도 수행하지 않습니다. 선택적 매개변수 alignCenter가 true로 설정된 경우 요소를 창 중앙(세로 방향)에 표시하려고 한다는 의미입니다. ------Safari와 Chrome에서는 이 메서드를 구현합니다

3.scrollByLines(lineCount)는 창을 스크롤합니다. 지정할 요소의 내용 행 수의 높이, lineCount 값은 양수 또는 음수일 수 있습니다. ---Safari와 Chrome은 이 방법을 구현합니다

4. scrollByPages(pageCount)는 요소의 내용을 지정된 페이지 높이로 스크롤합니다. 특정 높이는 요소의 높이에 따라 결정됩니다. ---Safari와 Chrome은 이 메서드를 구현합니다.

scrollIntoView() 및 scrollIntoVIewIfNeeded()는 요소의 창에 영향을 주고, scrollByLines() 및 scrollByPages()는 요소 자체에 영향을 줍니다.

//将页面主体滚动5行
document.body.scrollByLines(5);

/确保当前元素可见
document.getElementById(“test”).scrollIntoView();   //
//true:对象的顶端与当前窗口的顶部对齐
//false:对象的底端与当前窗口的顶部对齐

rreee

//确保只在当前元素不可见的情况下才使其可见
document.getElementById(“test”).scrollIntoViewIfNeeded();

위 내용은 scrollIntoView의 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!