js operasi bar skrol acara example_javascript kemahiran

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"); 
  } 
}

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; 
});

Tambahan:

1. Pantau acara bar skrol bagi elemen tertentu

$(selector).scroll(function(){.......});

2. Dapatkan jarak tatal bar tatal

$(selector).scrollTop();
$(selector).scrollLefft();

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.