JavaScript Kullanarak Bir Öğeye Nasıl Kaydırılır

Web sayfalarında gezinirken bir öğeye kaydırmak kullanıcının dikkatini uzun süre üzerine çekerek odaklanmasını sağlar. Bu işlevsellik, bir kullanıcının yalnızca tek bir tıklama kullanarak kaydırma yapması gerektiğinde veya otomasyon testi durumunda, sayfanın altına eklenen içeriği anında kontrol etmek için uygulanabilir. Bu tür senaryolarda, JavaScript'te bir öğeye kaydırmak, fazla kullanıcı etkileşimi olmadan tek bir tıklamayla uygulanacak işlevsellik ekler ve zaman kazandırır.

Bu kılavuz, JavaScript kullanarak bir öğeye kaydırmanız için size rehberlik edecektir.

JavaScript Kullanarak Bir Öğeye Nasıl Kaydırılır?

JavaScript kullanarak bir öğeye kaydırmak için şunları kullanabilirsiniz:

• • “ görünüme geç() ' yöntem
  • “ taslak() ' yöntem
  • “ kaydırmak() ' yöntem

Bahsedilen yaklaşımlar tek tek gösterilecektir!

Yöntem 1: scrollIntoView() Yöntemini Kullanarak JavaScript'te Bir Öğeye Kaydırın

“ görünüme geç() ” yöntemi, bir öğeyi Belge Nesne Modelinin (DOM) görünür alanına kaydırır. Bu yöntem, belirtilen HTML'yi almak ve onclick olayının yardımıyla belirli yöntemi ona uygulamak için uygulanabilir.

Sözdizimi

Verilen sözdiziminde, “ hizalamak ” hizalama türünü belirtir.

Örnek

Aşağıdaki örnekte, “ kullanarak aşağıdaki başlığı ekleyin.

' etiket:

< h2 > Öğeye gitmek için düğmeye tıklayın. h2 >

Şimdi, “ ile bir düğme oluşturun. tıklamada ” işlevi çağıran olay” scrollElement() :

< buton tıklamada = 'scrollElement()' > Kaydırma Öğesi buton >
< br >

Bundan sonra, kaydırılacak görüntü kaynağını ve kimliğini belirtin:

< resim kaynak = 'inceleme.PNG' İD = 'div' >

Son olarak “adlı bir fonksiyon tanımlayın. scrollElement() ” kullanarak gerekli öğeyi getirecektir. belge.getElementById() ” yöntemini seçin ve görüntüyü kaydırmak için üzerine scrollIntoView() yöntemini uygulayın:

işlev scrollElement ( ) {
var element = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

CSS Kodu

CSS kodunda, resim kimliğine atıfta bulunarak resim boyutunu ayarlamak için aşağıdaki boyutları uygulayın. div ”:

#div{
yükseklik: 800 piksel;
genişlik: 1200 piksel;
taşma: otomatik;
}

İlgili çıktı şöyle olacaktır:

Yöntem 2: window.scroll() Yöntemini Kullanarak JavaScript'te Bir Öğeye Kaydırın

“ pencere.scroll() ” yöntemi, belgedeki koordinat değerlerine göre pencereyi kaydırır. Bu yöntem, görüntü kimliğini almak, koordinatlarını bir işlev kullanarak ayarlamak ve belirtilen görüntüyü kaydırmak için uygulanabilir.

Sözdizimi

pencere. kaydırma ( x-koordu, y-koordu )

Yukarıdaki sözdiziminde, ' x-koordu ”, X koordinatlarını ifade eder ve “ y-kodu ” Y koordinatlarını gösterir.

Aşağıdaki örnek, belirtilen kavramı açıklamaktadır.

Örnek

Başlığı eklemek, bir düğme oluşturmak, onclick olayını uygulamak ve kimliğiyle görüntü kaynağını belirlemek için aynı adımları tekrarlayın:

< h2 > Öğeye gitmek için düğmeye tıklayın. h2 >
< buton tıklamada = 'scrollElement()' > Kaydırma Öğesi buton >
< br >
< resim kaynak = 'resim.PNG' İD = 'div' >

Ardından, “ adlı bir işlev tanımlayın. scrollElement() ”. Burada koordinatları “ kullanarak ayarlayacağız. pencere.scroll() ” adlı işleve erişerek yöntemi Durum() ” ve bunu alınan görüntü öğesine uygulayarak:

işlev scrollElement ( ) {
pencere. kaydırma ( 0 , Durum ( belge.getElementById ( 'div' ) ) ) ;
}

Daha sonra “adlı bir fonksiyon tanımlayın. Durum() ” argümanı olarak bir değişken obj almak. Ayrıca, ' ofsetEbeveyn Statik bir konumu olmayan en yakın ataya erişecek ve onu döndürecek olan ” özelliği. Ardından, başlatılmış geçerli üst değeri “ yardımıyla artırın. ofsetÜst ebeveyne (offsetParent) göre en üst konumu döndürecek ve ' değerini döndürecek olan ” özelliği mevcut üst ” eklenen koşul doğru olarak değerlendirildiğinde:

işlev Durum ( nesne ) {
nerede akımtop = 0 ;
eğer ( obj.offsetEbeveyn ) {
yapmak {
currenttop += obj.offsetTop;
} süre ( ( obj = obj.offsetEbeveyn ) ) ;
dönüş [ akımtop ] ;
}
}

Son olarak, oluşturulan kapsayıcıyı gereksinimlerinize göre biçimlendirin:

#div{
yükseklik: 1000 piksel;
genişlik: 1000 piksel;
taşma: otomatik;
}

Çıktı

Yöntem 3: scrollTo() Yöntemini Kullanarak JavaScript'te Bir Öğeye Kaydırın

“ kaydırmak() ” yöntemi, belirtilen belgeyi atanan koordinatlara kaydırır. Bu yöntem, kimliği kullanarak ve belirli bir görüntüyü DOM'da kaydırmak için gerekli işlevselliği gerçekleştirerek öğeyi elde etmek için benzer şekilde uygulanabilir.

Sözdizimi

pencere.scrollTo ( x ve y )

Burada, ' x ' ve ' Y ” x ve y koordinatlarını işaret edin.

Aşağıdaki örneğe bir göz atın.

Örnek

İlk olarak, bir başlık, onclick olayı içeren düğme ve resim eklemek için yukarıda tartışılan adımları aşağıdaki gibi tekrarlayın:

< h2 > Öğeye gitmek için düğmeye tıklayın. h2 >
< buton tıklamada = 'scrollElement()' > Kaydırma Öğesi buton >
< br >
< resim kaynak = 'resim.JPG' İD = 'div' >

Ardından, “ adlı bir işlev tanımlayın. scrollElement() ” ve scrollTo() yönteminde Position() yöntemini çağırarak kaydırmayı ayarlayın:

işlev scrollElement ( ) {
pencere.scrollTo ( 0 , Durum ( belge.getElementById ( 'div' ) ) ) ;
}

Son olarak, Position() adında bir fonksiyon tanımlayın ve belirtilen görüntünün koordinatlarını ayarlamak için yukarıda tartışılan adımları benzer şekilde uygulayın:

işlev Durum ( nesne ) {
nerede akımtop = 0 ;
eğer ( obj.offsetEbeveyn ) {
yapmak {
currenttop += obj.offsetTop;
} süre ( ( obj = obj.offsetEbeveyn ) ) ;
dönüş [ akımtop ] ;
}
}

Çıktı

JavaScript kullanarak bir öğeye kaydırmanın tüm uygun yöntemlerini tartıştık.

Çözüm

JavaScript'te bir öğeye kaydırmak için “ görünüme geç() ” öğeye erişme ve belirtilen işlevselliği uygulama yöntemi, “ pencere.scroll() Öğeyi getirme, bir işlev kullanarak koordinatlarını ayarlama ve görüntüyü kaydırma veya ' kaydırmak() ” yöntemi, öğeyi getirmek ve buna göre kaydırmak için. Bu blog, JavaScript kullanarak bir öğeye kaydırma konseptini gösterdi.