Bagaimanakah Saya Boleh Mengawal Kelajuan Tatal Laman Web Menggunakan CSS dan JavaScript?

Memperlahankan Kelajuan Tatal: CSS lwn. JavaScript

Pernyataan Masalah

Dalam pembangunan web, adalah wajar untuk mengawal kelajuan tatal kandungan tapak web, terutamanya apabila menggunakan roda tetikus. Walau bagaimanapun, CSS sahaja mungkin tidak mencukupi untuk tujuan ini.

Had CSS

Walaupun CSS boleh digunakan untuk melaksanakan sifat berkaitan tatal tertentu, seperti limpahan, ia tidak secara langsung memberikan keupayaan untuk ubah suai kelajuan tatal. Ini kerana kelajuan tatal bergantung pada pelbagai faktor, termasuk sistem pengendalian, tetapan penyemak imbas dan pilihan pengguna.

Penyelesaian JavaScript

Untuk menangani cabaran ini, perpustakaan JavaScript atau JavaScript seperti jQuery boleh digunakan. Dengan memanipulasi peristiwa tatal penyemak imbas, pembangun boleh mengubah kelajuan tatal, melaraskan gelagat tatal, malah membalikkan arah tatal.

Pelaksanaan Praktikal

Salah satu pelaksanaan seperti itu ialah demo JavaScript/jQuery Toni Almeida . Berikut ialah pecahan:

HTML:

<div>
<p><strong>JavaScript/jQuery:</strong></p>
<pre class="brush:php;toolbar:false">function wheel(event) {
  var delta = 0;
  if (event.wheelDelta) {
    delta = event.wheelDelta / 120;
  } else if (event.detail) {
    delta = -event.detail / 3;
  }

  handle(delta);
  if (event.preventDefault) {
    event.preventDefault();
  }
  event.returnValue = false;
}

function handle(delta) {
  var time = 1000;
  var distance = 300;

  $('html, body').stop().animate({
    scrollTop: $(window).scrollTop() - (distance * delta)
  }, time);
}

if (window.addEventListener) {
  window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;

Kod ini mengurangkan dengan berkesan kelajuan tatal dengan menghidupkan kedudukan tatal pada kadar yang lebih perlahan. Apabila pengguna menatal, tatal menjadi perlahan dan akhirnya berhenti, memberikan kawalan yang diingini ke atas gelagat tatal kandungan.