JavaScript를 사용하여 요소로 스크롤하는 방법은 무엇입니까?

JavaScript를 사용하여 요소를 어떻게 스크롤하나요?

scrollIntoView() 메서드를 사용하면 웹페이지의 특정 요소로 스크롤할 수 있습니다. 이 메서드는 모든 주요 브라우저에서 지원됩니다.

scrollIntoView() 메서드를 사용하려면 스크롤하려는 요소를 메서드에 인수로 전달하기만 하면 됩니다. 예를 들어 다음 코드는 ID가 "divFirst"인 요소로 스크롤합니다.

document.getElementById("divFirst").scrollIntoView();

scrollIntoView() 메서드는 요소를 뷰로 스크롤하는 방법을 지정하는 선택적 두 번째 인수를 사용할 수 있습니다. 다음 값이 허용됩니다.

• "auto": 현재 위치에서 페이지를 스크롤하지 않고도 요소가 최대한 많이 스크롤되어 표시됩니다.
• "smooth": 애니메이션 효과를 사용하여 요소가 부드럽게 스크롤되어 표시됩니다.
• "if-needed": 요소가 아직 표시되지 않은 경우에만 스크롤하여 표시됩니다.

예를 들어, 다음 코드는 ID가 "divFirst"인 요소로 원활하게 스크롤합니다.

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});

scrollIntoView() 메서드를 사용하여 요소 내의 특정 오프셋으로 스크롤할 수도 있습니다. 이렇게 하려면 다음 속성을 가진 객체를 메서드의 두 번째 인수로 전달합니다.

• "block": 요소 상단으로부터의 오프셋(픽셀 단위)
• "inline": 요소 왼쪽으로부터의 오프셋(픽셀 단위).

예를 들어 다음 코드는 ID가 "divFirst"인 요소로 스크롤하고 위에서 100픽셀만큼 오프셋합니다. 왼쪽에서 50픽셀:

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});

위 내용은 JavaScript를 사용하여 요소로 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!