Przewijanie umożliwia użytkownikom przeglądanie stron internetowych/długich dokumentów w lewo iw prawo lub w górę iw dół. Można to wykonać, dodając poziome i pionowe paski przewijania w zależności od zawartości. Wymiary paska przewijania, takie jak wysokość i szerokość, są ustawione domyślnie. Można je jednak dostosować za pomocą powiązanych z nimi metod JavaScript. Gdy można je dodać lub ustawić w dokumencie, użytkownik może łatwo je zidentyfikować za pomocą wbudowanego „ scrollTop() ”, oraz „ przewiń w lewo() metody.
W tym poście wyjaśniono cel i funkcjonalność metody „scrollLeft()” w jQuery.
Czym jest metoda „scrollLeft()” w jQuery?
„ przewiń w lewo() ” jest specjalnie zaprojektowana dla poziomego paska przewijania, aby ustawić i pobrać jego pozycję w pikselach. Oblicza pozycję paska przewijania wybranego elementu HTML. Jest to najczęściej stosowane do elementów div, kontenera i sekcji.
Składnia (ustaw pozycję poziomego paska przewijania)
$ ( selektor ) .przewiń w lewo ( pozycja )
Powyższa składnia przyjmuje wartość całkowitą jako „ pozycja ”, aby ustawić poziomą pozycję paska przewijania docelowego selektora.
Składnia (uzyskaj pozycję poziomego paska przewijania)
$ ( selektor ) .przewiń w lewo ( )
Ta składnia zwraca wartość argumentu „pozycja” selektora w pikselach.
Wykorzystajmy zdefiniowaną metodę praktycznie.
Kod HTML
Najpierw spójrz na podany kod HTML:
< Sekcja styl = „wysokość: 150 pikseli; szerokość: 200 pikseli; margines: automatyczny; obramowanie: 2 piksele jednolita czerń; przepełnienie: auto;spacja: nowrap;' >
< h2 > Witamy w Linuxhint ! h2 >
Sekcja >
< przycisk > Ustaw pozycję przycisk >
W powyższych liniach kodu:
- „
Znacznik ” zawiera sekcję wewnątrz dokumentu HTML dostosowaną za pomocą atrybutu „style”. - Wewnątrz utworzonej sekcji „ Znacznik ” określa podtytuł.
- Wreszcie „
” dodaje przycisk.
Notatka: Postępuj zgodnie z podanym kodem HTML we wszystkich przykładach tego posta.
Przykład 1: Zastosowanie metody „scrollLeft()” do ustawienia pozycji paska przewijania (w poziomie)
W tym przykładzie zastosowano metodę „scrollLeft()” w celu ustawienia paska przewijania (w poziomie) w określonej pozycji.
Kod jQuery
Postępuj zgodnie z podanym kodem jQuery:
< scenariusz źródło = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenariusz >< scenariusz >
$ ( dokument ) .gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) .Kliknij ( funkcjonować ( ) {
$ ( 'Sekcja' ) .przewiń w lewo ( pięćdziesiąt ) ;
} ) ;
} ) ;
scenariusz >
W tym fragmencie kodu:
- Najpierw określ ścieżkę CDN biblioteki jQuery w „
”tag z oficjalnej strony internetowej” https://jquery.com/ ” przy pomocy „ źródło ' atrybut. - Następnie drugi tag „