Thao tác cuộn cho phép người dùng xem các trang web/tài liệu dài từ trái sang phải hoặc lên và xuống. Nó có thể được thực hiện bằng cách bổ sung các thanh cuộn ngang và dọc tùy thuộc vào nội dung. Kích thước của thanh cuộn chẳng hạn như chiều cao và chiều rộng được đặt theo mặc định. Tuy nhiên, chúng có thể được tùy chỉnh với sự trợ giúp của các phương thức JavaScript được liên kết của chúng. Khi chúng có thể được thêm hoặc đặt vào tài liệu, người dùng có thể dễ dàng xác định chúng bằng cách sử dụng “ scrollTop() ', và ' scrollLeft() ” phương pháp.
Bài đăng này giải thích mục đích và chức năng của phương thức “scrollLeft()” trong jQuery.
Phương thức “scrollLeft()” trong jQuery là gì?
Các ' scrollLeft() ” được thiết kế riêng cho thanh cuộn ngang để đặt và truy xuất vị trí của nó theo pixel. Nó tính toán vị trí thanh cuộn phần tử HTML đã chọn. Nó chủ yếu được áp dụng cho các phần tử div, container và section.
Cú pháp (Đặt vị trí thanh cuộn ngang)
$ ( bộ chọn ) .scrollLeft ( chức vụ )
Cú pháp trên lấy giá trị số nguyên là “ chức vụ ” để đặt vị trí thanh cuộn ngang của bộ chọn được nhắm mục tiêu.
Cú pháp (Nhận vị trí thanh cuộn ngang)
$ ( bộ chọn ) .scrollLeft ( )
Cú pháp này trả về giá trị đối số 'vị trí' của bộ chọn tính bằng pixel.
Hãy sử dụng phương pháp được xác định một cách thực tế.
Mã HTML
Trước tiên, hãy xem mã HTML đã nêu:
< phần phong cách = 'height:150px; width: 200px ;margin:auto;border:2px màu đen đặc; tràn: auto;khoảng trắng: nowrap;' >
< h2 > Chào mừng đến với Linuxhint ! h2 >
phần >
< cái nút > Đặt vị trí cái nút >
Trong các dòng mã trên:
- Các '
” chứa một phần bên trong tài liệu HTML được tùy chỉnh với sự trợ giúp của thuộc tính “style”. - Bên trong phần đã tạo, phần “ ” thẻ xác định tiêu đề phụ.
- Cuối cùng, “
” thẻ thêm một nút.
Ghi chú: Thực hiện theo mã HTML đã cho trong tất cả các ví dụ của bài đăng này.
Ví dụ 1: Áp dụng Phương thức “scrollLeft()” để Đặt Vị trí Thanh cuộn (Ngang)
Ví dụ này sử dụng phương thức “scrollLeft()” để đặt thanh cuộn (ngang) ở vị trí đã chỉ định.
Mã jQuery
Thực hiện theo mã jQuery đã cho:
< kịch bản src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > kịch bản >< kịch bản >
$ ( tài liệu ) .sẵn sàng ( chức năng ( ) {
$ ( 'cái nút' ) .nhấp chuột ( chức năng ( ) {
$ ( 'phần' ) .scrollLeft ( năm mươi ) ;
} ) ;
} ) ;
kịch bản >
Trong đoạn mã này:
- Đầu tiên, chỉ định đường dẫn CDN của thư viện jQuery trong phần “
” từ trang web chính thức của nó “ https://jquery.com/ ” với sự giúp đỡ của “ src ' thuộc tính. - Tiếp theo, thẻ “