웹 페이지를 탐색하는 동안 요소로 스크롤하면 사용자의 주의를 오랫동안 사로잡아 집중할 수 있습니다. 이 기능은 사용자가 한 번의 클릭으로 스크롤해야 하거나 자동화 테스트의 경우 페이지 하단에 추가된 내용을 즉시 확인하기 위해 적용할 수 있습니다. 이러한 시나리오에서 JavaScript의 요소로 스크롤하면 많은 사용자 상호 작용 없이 한 번의 클릭으로 적용할 수 있는 기능이 추가되고 시간이 절약됩니다.
이 매뉴얼은 JavaScript를 사용하여 요소로 스크롤하는 방법을 안내합니다.
JavaScript를 사용하여 요소로 스크롤하는 방법은 무엇입니까?
JavaScript를 사용하여 요소로 스크롤하려면 다음을 사용할 수 있습니다.
-
- ' scrollIntoView() ' 방법
- ' 스크롤() ' 방법
- ' scrollTo() ' 방법
언급된 접근 방식을 하나씩 설명하겠습니다!
방법 1: scrollIntoView() 메서드를 사용하여 JavaScript에서 요소로 스크롤
' scrollIntoView() ” 메소드는 DOM(Document Object Model)의 보이는 영역으로 요소를 스크롤합니다. 이 메서드는 지정된 HTML을 가져오고 onclick 이벤트의 도움으로 특정 메서드를 HTML에 적용하는 데 적용할 수 있습니다.
통사론
element.scrollIntoView ( 맞추다 )
주어진 구문에서 ' 맞추다 '는 정렬 유형을 나타냅니다.
예시
다음 예에서 '를 사용하여 다음 제목을 추가합니다. ' 태그:
< h2 > 버튼을 클릭하여 요소로 스크롤합니다. h2 >
이제 ' 클릭 ' 함수를 호출하는 이벤트 ' 스크롤 요소() :
< 브 >
그런 다음 스크롤할 이미지 소스와 해당 ID를 지정합니다.
마지막으로 ' 스크롤 요소() '를 사용하여 필요한 요소를 가져옵니다. 문서.getElementById() ” 메서드를 선택하고 이미지를 스크롤하려면 여기에 scrollIntoView() 메서드를 적용합니다.
var 요소 = document.getElementById ( '디비' ) ;
element.scrollIntoView ( ) ;
}
CSS 코드
CSS 코드에서 이미지 id '를 참조하여 이미지 크기를 조정하기 위해 다음 치수를 적용 div ':
#div{높이: 800px;
너비: 1200px;
오버플로: 자동;
}
해당 출력은 다음과 같습니다.
방법 2: window.scroll() 메서드를 사용하여 JavaScript에서 요소로 스크롤
' window.scroll() ” 메서드는 문서의 좌표 값에 따라 창을 스크롤합니다. 이 메서드는 이미지 ID를 가져오고, 함수를 사용하여 좌표를 설정하고, 지정된 이미지를 스크롤하도록 구현할 수 있습니다.
통사론
창.스크롤 ( x 좌표, y 좌표 )
위 구문에서 ' x-좌표 '는 X 좌표를 나타내고 ' y-좌표 '는 Y 좌표를 나타냅니다.
다음 예에서는 명시된 개념을 설명합니다.
예시
동일한 단계를 반복하여 제목을 추가하고, 버튼을 만들고, onclick 이벤트를 적용하고, 해당 ID로 이미지 소스를 지정합니다.
< h2 > 버튼을 클릭하여 요소로 스크롤합니다. h2 >< 단추 클릭 = '스크롤 요소()' > 스크롤 요소 단추 >
< 브 >
< 영상 src = '이미지.PNG' ID = '디비' >
다음으로 ' 스크롤 요소() '. 여기에서는 '를 사용하여 좌표를 조정합니다. window.scroll() '라는 함수에 액세스하여 '메소드' 위치() '를 가져와 가져온 이미지 요소에 적용합니다.
창.스크롤 ( 0 , 위치 ( 문서.getElementById ( '디비' ) ) ) ;
}
그런 다음 ' 위치() ' 변수 obj 를 인수로 사용합니다. 또한 ' 오프셋 부모 ” 속성은 정적 위치가 없는 가장 가까운 조상에 액세스하여 반환합니다. 그런 다음 ' 오프셋 탑 '부모(offsetParent)에 대한 최상위 위치를 반환하고 ' 값을 반환하는 속성 현재 정상 ' 추가된 조건이 true로 평가되는 경우:
여기서 currenttop = 0 ;
만약에 ( obj.offsetParent ) {
하다 {
현재 상단 += obj.offsetTop;
} 동안 ( ( obj = obj.offsetParent ) ) ;
반품 [ 전류 탑 ] ;
}
}
마지막으로 요구 사항에 따라 생성된 컨테이너의 스타일을 지정합니다.
높이: 1000px;
너비: 1000px;
오버플로: 자동;
}
산출
방법 3: scrollTo() 메서드를 사용하여 JavaScript에서 요소로 스크롤
' scrollTo() ' 메서드는 지정된 문서를 지정된 좌표로 스크롤합니다. 이 메서드는 id를 사용하고 DOM에서 특정 이미지를 스크롤하는 데 필요한 기능을 수행하여 요소를 가져오도록 유사하게 구현할 수 있습니다.
통사론
window.scrollTo ( x와 y )
여기, ' 엑스 ' 그리고 ' 와이 '는 x 및 y 좌표를 가리킵니다.
다음 예를 살펴보십시오.
예시
먼저 제목, onclick 이벤트가 있는 버튼 및 이미지를 추가하기 위해 위에서 설명한 단계를 다음과 같이 반복합니다.
< h2 > 버튼을 클릭하여 요소로 스크롤합니다. h2 >< 단추 클릭 = '스크롤 요소()' > 스크롤 요소 단추 >
< 브 >
< 이미지 src = '이미지.JPG' ID = '디비' >
다음으로 ' 스크롤 요소() '를 입력하고 scrollTo() 메서드에서 Position() 메서드를 호출하여 스크롤을 설정합니다.
window.scrollTo ( 0 , 위치 ( 문서.getElementById ( '디비' ) ) ) ;
}
마지막으로 Position()이라는 함수를 정의하고 지정된 이미지의 좌표를 설정하기 위해 위에서 설명한 단계를 유사하게 적용합니다.
여기서 currenttop = 0 ;
만약에 ( obj.offsetParent ) {
하다 {
현재 상단 += obj.offsetTop;
} 동안 ( ( obj = obj.offsetParent ) ) ;
반품 [ 전류 탑 ] ;
}
}
산출
JavaScript를 사용하여 요소로 스크롤하는 모든 편리한 방법에 대해 논의했습니다.
결론
JavaScript에서 요소로 스크롤하려면 ' scrollIntoView() ' 요소에 액세스하고 지정된 기능을 적용하는 ' window.scroll() ' 메소드를 사용하여 요소를 가져오고 함수를 사용하여 좌표를 설정하고 이미지를 스크롤하거나 ' scrollTo() ” 메서드를 사용하여 요소를 가져와 그에 따라 스크롤합니다. 이 블로그는 JavaScript를 사용하여 요소로 스크롤하는 개념을 보여주었습니다.