Setiap peramban mempunyai spesifikasi yang berbeda:
if (window.addEventListener) { // IE9, Chrome, Safari, Opera window.addEventListener("mousewheel", doScroll, false); // Firefox window.addEventListener("DOMMouseScroll", doScroll, false); } else { // IE 6/7/8 window.attachEvent("onmousewheel", doScroll); }Event ini akan memicu sebuah fungsi berjulukan doScroll (yang akan kita buat nanti) untuk bekerja dikala mouse wheel digulung. Dimana nantinya doScroll akan dijadikan sebagai penayang nilai gulungan.
Nilainya hanya terdiri dari 1 atau -1, sekedar untuk menunjukkan apakah agresi yang terjadi yaitu “menggulung ke atas” atau “menggulung ke bawah”:
var doScroll = function(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // Lakukan sesuatu dengan `delta` // (dalam referensi ini: menampilkan nilainya di dalam area `<body>`) document.body.innerHTML = delta; e.preventDefault(); // Tambahkan ini biar kerja `mouse whell` yang bekerjsama dapat dimatikan }; if (window.addEventListener) { // IE9, Chrome, Safari, Opera window.addEventListener("mousewheel", doScroll, false); // Firefox window.addEventListener("DOMMouseScroll", doScroll, false); } else { // IE 6/7/8 window.attachEvent("onmousewheel", doScroll); }Memperbaharui Nilai Setiap Kali Gulungan Terjadi
Pada demo di atas, setiap kali Anda menggulung di atas halaman, yang terjadi hanyalah sebuah penampakan angka 1 atau -1 yang akan muncul menurut arah gulungan. Untuk menciptakan nilainya meningkat atau berkurang, buatlah sebuah variabel kosong di luar event tersebut dengan nilai 0 menyerupai ini:
var current = 0;Setelah itu, tingkatkan/kurangi nilainya dengan cara menambahkan nilai delta ke current:
var current = 0; var doScroll = function(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // Lakukan sesuatu dengan `delta` current = current + delta; // Tingkatkan/kurangi nilai `current` dengan `delta` document.body.innerHTML = current; // Tampilkan balasannya di dalam `<body>` e.preventDefault(); };Contoh Penerapan: Membuat Area Menggulung Secara Horizontal
Pada pada dasarnya di sini Saya menerapkan referensi nomor dua dengan cara memanfaatkan nilai yang dihasilkan untuk memanipulasi nilai properti left pada elemen biar elemen dapat bergerak ke kiri atau ke kanan menurut arah gulungan. Supaya gerakannya lebih cepat, nilainya Saya kalikan dengan mean:
HTML
<div id="scroll-area"> <div> <!-- Konten di sini... --> </div> <div>CSS
#scroll-area { width:400px; border:2px solid; background-color:#ccc; overflow:hidden; } #scroll-area div { width:3000px; position:relative; /* relative positioned */ padding:10px 14px; }JavaScript
// Fake horizontal scrolling with mouse wheel var elem = document.getElementById('scroll-area'), width = parseInt(elem.offsetWidth, 10), cldWidth = parseInt(elem.children[0].offsetWidth, 10), distance = cldWidth-width, mean = 40, // Just for multiplier (go faster or slower) current = 0; elem.children[0].style.left = current + "px"; // Set default `left` value as `0` for initiation var doScroll = function(e) { // cross-browser wheel delta e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // (1 = scroll-up, -1 = scroll-down) // Always check the scroll distance, make sure that the scroll distance value will not // increased more than the container width and/or less than zero if ((delta == -1 && current*mean >= -distance) || (delta == 1 && current*mean < 0)) { current = current + delta; } // Move element to the left or right by updating the `left` value elem.children[0].style.left = (current*mean) + 'px'; e.preventDefault(); }; if (elem.addEventListener) { elem.addEventListener("mousewheel", doScroll, false); elem.addEventListener("DOMMouseScroll", doScroll, false); } else { elem.attachEvent("onmousewheel", doScroll); }Demo
Contoh Penerapan: Scroll Horizontal Satu Layar Penuh
Selengkapnya, silakan lihat dan pelajari instruksi sumbernya:
JavaScript
(function() { function scrollHorizontally(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // Scroll to the left or right in `document.documentElement` and `document.body` document.documentElement.scrollLeft -= (delta * 40); // Multiplied by 40 document.body.scrollLeft -= (delta * 40); // Multiplied by 40 e.preventDefault(); } if (window.addEventListener) { // IE9, Chrome, Safari, Opera window.addEventListener("mousewheel", scrollHorizontally, false); // Firefox window.addEventListener("DOMMouseScroll", scrollHorizontally, false); } else { // IE 6/7/8 window.attachEvent("onmousewheel", scrollHorizontally); } })();