스크롤을 통해 사용자는 웹 페이지/긴 문서를 좌우 또는 위아래로 볼 수 있습니다. 내용에 따라 가로 및 세로 스크롤바를 추가하여 수행할 수 있습니다. 높이 및 너비와 같은 스크롤 막대의 크기는 기본적으로 설정됩니다. 그러나 관련 JavaScript 메서드를 사용하여 사용자 정의할 수 있습니다. 문서에 추가하거나 설정할 수 있으면 사용자는 내장된 ' 스크롤탑() ', 그리고 ' 왼쪽 스크롤() 방법.
이 게시물은 jQuery에서 'scrollLeft()' 메서드의 목적과 기능을 설명합니다.
jQuery의 'scrollLeft()' 메서드는 무엇입니까?
“ 왼쪽 스크롤() ” 메서드는 가로 스크롤 막대가 해당 위치를 픽셀 단위로 설정하고 검색하도록 특별히 설계되었습니다. 선택한 HTML 요소 스크롤 막대 위치를 계산합니다. 주로 div, container, section 요소에 적용됩니다.
구문(가로 스크롤 막대 위치 설정)
$ ( 선택자 ) .scrollLeft ( 위치 )
위 구문은 정수 값을 ' 위치 ” 인수를 사용하여 대상 선택기의 수평 스크롤 막대 위치를 설정합니다.
구문(가로 스크롤 막대 위치 가져오기)
$ ( 선택자 ) .scrollLeft ( )
이 구문은 선택기의 '위치' 인수 값을 픽셀 단위로 반환합니다.
정의된 메서드를 실제로 사용해 봅시다.
HTML 코드
먼저 명시된 HTML 코드를 살펴보십시오.
< 부분 스타일 = '높이:150px; 너비: 200px ;여백:자동;테두리:2px 단색 검정; 오버플로: 자동;공백: nowrap;' >
< h2 > 리눅스힌트에 오신 것을 환영합니다 ! h2 >
부분 >
< 단추 > 위치 설정 단추 >
위의 코드 줄에서:
- “ <섹션> ” 태그는 “style” 속성의 도움으로 사용자 정의된 HTML 문서 내부의 섹션을 포함합니다.
- 생성된 섹션 내에서 ' ” 태그는 부제목을 정의합니다.
- 마지막으로 “ <버튼> ” 태그는 버튼을 추가합니다.
메모: 이 게시물의 모든 예제에서 주어진 HTML 코드를 따르십시오.
예제 1: “scrollLeft()” 메서드를 적용하여 스크롤바(가로) 위치 설정
이 예제는 'scrollLeft()' 메서드를 사용하여 지정된 위치에 스크롤바(가로)를 설정합니다.
jQuery를 코드
주어진 jQuery 코드를 따르십시오.
< 스크립트 소스 = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > 스크립트 >< 스크립트 >
$ ( 문서 ) .준비가 된 ( 기능 ( ) {
$ ( '단추' ) .딸깍 하는 소리 ( 기능 ( ) {
$ ( '부분' ) .scrollLeft ( 오십 ) ;
} ) ;
} ) ;
스크립트 >
이 코드 조각에서:
- 먼저 “ jQuery 라이브러리의 CDN 경로를 지정합니다. <스크립트> ” 공식 웹사이트의 태그 “ https://jquery.com/ ”의 도움으로 소스 ' 기인하다.
- 다음으로, 두 번째 '