Kaydırma, kullanıcıların web sayfalarını/uzun belgeleri sola ve sağa veya yukarı ve aşağı görüntülemesine olanak tanır. İçeriğe bağlı olarak yatay ve dikey kaydırma çubukları eklenerek gerçekleştirilebilir. Kaydırma çubuğunun yükseklik ve genişlik gibi boyutları varsayılan olarak ayarlanmıştır. Ancak bunlar, ilişkili JavaScript yöntemlerinin yardımıyla özelleştirilebilir. Bunlar belgeye eklendikten veya ayarlandıktan sonra, kullanıcı bunları yerleşik ' kaydırmaTop() ', ve ' kaydırmaLeft() ” yöntemleri.
Bu gönderi, jQuery'deki 'scrollLeft()' yönteminin amacını ve işlevselliğini açıklamaktadır.
JQuery'deki “scrollLeft()” Yöntemi nedir?
“ kaydırmaLeft() ” yöntemi, yatay kaydırma çubuğunun konumunu piksel cinsinden ayarlaması ve alması için özel olarak tasarlanmıştır. Seçilen HTML öğesi kaydırma çubuğu konumunu hesaplar. Çoğunlukla div, container ve section öğelerine uygulanır.
Sözdizimi (Yatay Kaydırma Çubuğu Konumunu Ayarla)
$ ( seçici ) .scrollSol ( konum )
Yukarıdaki sözdizimi, tamsayı değerini ' olarak alır. konum ” bağımsız değişkeni, hedeflenen seçicinin yatay kaydırma çubuğu konumunu ayarlamak için.
Sözdizimi (Yatay Kaydırma Çubuğu Konumunu Alın)
$ ( seçici ) .scrollSol ( )
Bu sözdizimi, seçicinin 'konum' bağımsız değişken değerini piksel cinsinden döndürür.
Tanımlanan yöntemi uygulamalı olarak kullanalım.
HTML Kodu
İlk olarak, belirtilen HTML koduna bir göz atın:
< bölüm stil = 'yükseklik:150 piksel; genişlik: 200 piksel; kenar boşluğu: otomatik; kenarlık: 2 piksel düz siyah; taşma: otomatik;boşluk: şimdi rap;' >
< h2 > Linuxhint'e hoş geldiniz ! h2 >
bölüm >
< düğme > Pozisyonu ayarla düğme >
Yukarıdaki kod satırlarında:
- “
” etiketi, HTML belgesi içerisinde “style” özelliği yardımıyla özelleştirilmiş bir bölüm içerir. - Oluşturulan bölümün içinde “ ” etiketi alt başlığı tanımlar.
- Son olarak, “
” etiketi bir düğme ekler.
Not: Bu gönderideki tüm örneklerde verilen HTML kodunu izleyin.
Örnek 1: Kaydırma Çubuğu(Yatay) Konumunu Ayarlamak için 'scrollLeft()' Yöntemini Uygulama
Bu örnek, kaydırma çubuğunu(yatay) belirtilen konuma ayarlamak için 'scrollLeft()' yöntemini kullanır.
jQuery Kodu
Verilen jQuery kodunu takip edin:
< senaryo kaynak = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > senaryo >< senaryo >
$ ( belge ) .hazır ( işlev ( ) {
$ ( 'düğme' ) .tıklamak ( işlev ( ) {
$ ( 'bölüm' ) .scrollSol ( elli ) ;
} ) ;
} ) ;
senaryo >
Bu kod parçacığında:
- İlk olarak, jQuery kitaplığının CDN yolunu “
”resmi web sitesinden etiket” https://jquery.com/ '' yardımıyla kaynak ' bağlanmak. - Ardından, ikinci '