HTML horizontal scroll mouse wheel
Ilustrasi horizontal scroll mouse wheel.

HTML horizontal scroll mouse wheel

Laman web hasil render browser kombinasi dari markup HTML, CSS dan JavaScript, by default berbentuk rancang bangun secara vertikal. Membaca artikel, mencari inspirasi dari galeri Pinterest dan scrolling status Facebook yang tidak ada habisnya bergulir secara vertikal; dari atas ke bawah.

Namun seiring datangnya gelombang user yang akses web melalui perangkat mobile pintar, perlahan desain GUI secara horizontal mulai diterapkan.

Alih-alih untuk mengurangi panjang halaman web dan memberikan jeda scroll ke bawah yang tak ada habisnya, beberapa item komponen web tata letak diberi akses secara horizontal.

Selain untuk mempermanis desain web yang semakin modern dan intuitif, toh sudah menjadi tuntutan zaman front end developer sekarang, desain interface website tidak berfokus pada UI yang bagus saja.

Tapi harus melibatkan satu unsur lagi, yaitu UX (User Experience) pengalaman pengguna. πŸ’©

Melakukan scroll up and down dan swipe kiri-kanan halaman web sangat mudah dilakukan dengan perangkat layar sentuh.

Bagaimana dengan layar desktop yang masih mengandal scroll mouse cuma bisa up and down?

Browser desktop masih mempertahankan fungsi roda bulat scroll mouse tetap pada jalurnya, menggulir naik/turun secara vertikal.

Sedangkan scroll untuk swipe horizontal kiri-kanan masih belum ada tanda-tanda penambahan fungsi tersebut.

/*	Sintag CSS ini fiktif */
div {
  scroll-direction: horizontal;
}

πŸ”₯ QUICK TIPS: Properti CSS scroll-direction: horizontal; adalah sintak CSS fiktif khayalan Pieter Biesemans. Semoga style gagasan ini menjadi kenyataan pada update CSS masa depan.

Walau aplikasi mobile dengan desktop dibuat berfungsi sama, hanya saja sedikit berbeda pada jalur aksesnya saja.

Dan pengembang aplikasi oke-oke saja untuk mendevelop satu aplikasi dengan beragam versi, baik versi desktop; web base, plus dua apps lagi masing-masing khusus untuk Android dan IOS. 😭

Bagaimana dengan saya, hanya ingin satu aplikasi saja web saja, namun berfungsi dan responsive seutuhnya di semua jenis perangkat yang beragam ukuran layar? 😚

Satu lagi, bagaimana dengan website yang menerapkan Progressive Web Apps? 😱

Pieter Biesemans dalam artikel yang dipublish oleh CSS-Trick punya cara yang sangat cerdik, unik, simple dan super creative think different dalam memanipulasi scroll direction bawaan HTML dan CSS menjadi scrolling secara horizontal pada suatu element <div>.

Cara jitu Biesemans berjalan dengan sangat perfect sekali. πŸ‘

Trik yang dia lakukan, tampa melibatkan jQuery apalagi JavaScript, ini pure CSS dengan manipulasi ala trik magic sulap.

Bagaimana Pieter melakukannya❓

Dengan memutar arah blok container yang sudah diberi opsi overflow-y: auto berlawan arah jarum jam dengan property css transform: rotate(-90deg), maka scrollbar container pembungkus konten berubah arah menjadi horizontal.

Dasarnya vertikal, content yang terisi di dalam container tersebut juga ikut terbalik. Solusinya, <div> container pembungkus isi, di kembalikan ke posisi semula searah jarum jam transform:rotate(90deg).

Tada… πŸ’₯ Hasilnya sangat luar biasa, saat pointer mouse berada dalam blok container tadi, maka tombol scroll mouse pun berubah fungsi menjadi scroll direction secara horizontal.

See the Pen Horizontal css scroll by pieter-biesemans (@pieter-biesemans) on CodePen.

πŸ”₯ QUICK TIPS: Cukup edit sedikit code Pieter Biesemans dengan menambahkan properti scrollbar-width: none; dalam class CSS .horizontal-scroll-wrapper{ }, hasil tambah perfect lagi.

Tapi, sehebat-hebanya trick Pieter menyulap mouse wheel scroll-direction berfungsi secara horizontal di desktop dan mobile, tak mudah untuk menerapkan ke dalam projek kalian.

Di perangkat IOS trick Peter tidak berjalan dengan baik. Ia menyarankan untuk berpikir dua kali kalau menggunakan metode kreasi dia ke dalam projek yang serius. πŸ™

Kalau project iseng masih okelah.

Terus bagaimana kalau kalian tetap keukuh memfungsikan tombol scroll mouse berubah menjadi scroll direction: horizontal ke dalam sebuah elemen <div>❓

Tampa menggunakan jQuery lagi❓

Dengan struktur code yang simple, cara yang elegen, bisa langsung insert code ke dalam proyek besar. πŸ’˜

Begini cara implementasi fungsi horizontal scroll mouse wheel

PERTAMA siapkan satu blok element HTML sebagai berikut:

<div class="container">
  <div class="box-scroll">
    <div class="card ml">
      <img src="https://freebiespic.com/images/2018/0821_sneakers-shoes-men-on-the-shelf-thumb.jpg" alt="Text image">
      <p>Sneakers shoes for men</p>
    </div>
    <div class="card ml">
      <img src="https://freebiespic.com/images/2018/0820_shoes-for-men-leather-thumbnail.jpg" alt="Text image">
      <p>Product Title</p>
    </div>
    <div class="card ml">
      <img src="https://freebiespic.com/images/2018/0911_various-sneakers-on-the-showcase-at-the-store-thumb.jpg" alt="Text image">
      <p>Product Title</p>
    </div>
    <div class="card ml">
      <img src="https://freebiespic.com/images/2018/0821_sneakers-shoes-men-on-the-shelf-thumb.jpg" alt="Text image">
      <p>Product Title</p>
    </div>    
  </div>
</div>

KEDUA

Insert property CSS ke dalam element HTML yang sudah ada sebagai berikut:

html,body {
  height: 100%;
  background-color: ghostwhite;
}

/* CSS centering things
	from here https://insertapps.com/blog/super-simpel-css-center-container/ 
*/
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-scroll {
  display: flex;
  flex-wrap: nowrap;
  width: 70%;
  overflow: auto;
  /* Hidden scroll bar */
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.box-scroll::-webkit-scrollbar {
  display: none;
}

.card {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 5px;
  background-color: white;
}

.ml {
  margin-right: 10px;
}

img {
  display: block;
}

p {
  padding: 0 10px;
}

KETIGA

Terakhir tambahkan sedikit script javascript untuk menjalan fungsi scroll direction horizontal ke dalam element HTML.

// Declaring variable to target a div element
const mouseWheel = document.querySelector('.box-scroll');

// Add wheel function
mouseWheel.addEventListener('wheel', function(e) {

    const race = 10; // <= set scroll mouse move the wheels

    if (e.deltaY > 0) // <= Scroll right
        mouseWheel.scrollLeft += race;
    else // Scroll left
        mouseWheel.scrollLeft -= race;
	e.preventDefault();
});

Hasil Akhir Coding

Berikut hasil render code yang tidak seberapa itu.

Oya… bila di masa depan, scroll-scroll timeline tidak lagi menggunakan jari, bukan juga swipe tangan melayang melainkan mengikuti pergerakan wajah dan arah mata. Tidak perlu sibuk mikir coding lagi, karena browser sudah include AI. 😱

Comment

comments powered by Disqus