Rumah > hujung hadapan web > tutorial js > js operasi bar skrol acara example_javascript kemahiran

js operasi bar skrol acara example_javascript kemahiran

WBOY
Lepaskan: 2016-05-16 16:17:03
asal
1091 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara mengendalikan acara bar skrol dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Saya sentiasa tertanya-tanya bagaimana untuk memantau acara bar skrol, dan hari ini saya akhirnya memahaminya.

Kod di bawah adalah untuk memantau bar skrol selagi ia bergerak, dan kod di bawah mengembalikan div teratas untuk dipaparkan dan disembunyikan

window.onscroll = function () { 
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t > 0) { 
    $(".cbbfixed").css("bottom", "10px"); 
  } else { 
    $(".cbbfixed").css("bottom", "-85px"); 
  } 
}
Salin selepas log masuk

Nota:

t: Jarak antara bar skrol dan hujung atas

t>0, iaitu, sebaik sahaja bar skrol menatal, pernyataan if() dilaksanakan serta-merta Kod dalam else() ialah apabila bar skrol mencapai bahagian atas, kembali ke div atas untuk menyembunyikan <🎜. >

Kembali ke atas operasi klik butang:


$("#cgotop").click(function(){ 
  $('body,html').animate({ scrollTop: 0 }, 100); 
  return false; 
});
Salin selepas log masuk

Tambahan:

1. Pantau acara bar skrol bagi elemen tertentu


$(selector).scroll(function(){.......});
Salin selepas log masuk

2. Dapatkan jarak tatal bar tatal

$(selector).scrollTop();
$(selector).scrollLefft();
Salin selepas log masuk
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan