Cuộn chuột theo chiều ngang bằng con lăn chuột trong Javascript

Hãy tưởng tượng cuộn xuống bằng con lăn chuột hoặc bàn di chuột, nhưng thay vào đó trang của bạn sẽ cuộn theo chiều ngang. Thật tuyệt phải không? Trong bài viết này, chúng ta sẽ xem xét cách bạn có thể sử dụng Javascript để tạo ra một hiệu ứng thú vị như vậy.

Tạo một số nội dung có thể cuộn

Để bắt đầu, chúng tôi sẽ viết một số HTML để đặt một số nội dung yêu cầu một số cuộn ngang.

Mã HTML
<main>
  <section>
    <h1>Beep</h1>
  </section>
  <section>
    <h1>Boop</h1>
  </section>
  <section>
    <h1>Boooom</h1>
  </section>
</main>

Phần tử main sẽ là vùng chứa cuộn. Nó sẽ là phần tử mà thanh cuộn bị ràng buộc với điều kiện là có nội dung làm tràn thanh cuộn. Như hiện tại, không có đủ nội dung để tạo tràn. Vì vậy, chúng ta hãy sửa chữa điều này.

Đảm bảo nội dung tràn

Chúng ta sẽ đặt từng phần được căn chỉnh cạnh nhau để nội dung tràn theo chiều ngang. Chúng tôi đang cố gắng tạo ra một cái gì đó như thế này, nơi các phần tử tràn ra vùng chứa và do đó chúng tôi có thể tạo một thanh cuộn ngang cho chúng. Bạn có thể có bao nhiêu phần tùy thích.

Đối với mục đích của bản trình diễn này, chúng tôi sẽ làm cho các phần tử ở chế độ toàn màn hình. Để làm điều này, chúng tôi sẽ sử dụng các đơn vị khung nhìn như vhvw để đặt các thuộc tính min-widthmin-height tỷ lệ thành cả hai cạnh của màn hình. Sau đó, chúng tôi có thể căn giữa nội dung bằng cách sử dụng justify-contentalign-items.

Chúng tôi sử dụng display:flex việc làm cho phần tử main trở thành vùng chứa linh hoạt. Chúng tôi cũng sẽ ẩn thanh cuộn cho bản trình diễn này bằng cách sử dụng overflow-x: hidden. Không cần thiết cho điều này nhưng chúng tôi sẽ làm điều đó cho bản demo của chúng tôi. Nếu bạn quyết định không ẩn nó, hãy đảm bảo thay đổi nó cho overflow-x: scroll.

Mã CSS
main {
  overflow-x: hidden; /*or overflow-x:scroll */
  display: flex;
}

h1 {
  margin: 0;
}

section {
  min-width: 50vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4ch;
}

Và tại sao không, chúng tôi cũng sẽ cung cấp cho mỗi phần một nền tảng khác nhau:

Mã CSS
section:nth-child(even) {
  background-color: teal;
  color: white;
}

Sử dụng con lăn chuột hoặc bàn di chuột để cuộn theo chiều ngang

Đây là nơi mà phần thú vị đến. Bây giờ chúng ta sẽ đăng ký mousewheel sự kiện bằng cách gắn một trình xử lý sự kiện vào phần tử có thể cuộn của chúng tôi, trong trường hợp này là phần tử có thẻ main.

Những gì hiện phương tiện này? Có nghĩa là bây giờ chúng ta sẽ có thể thu thập thông tin thông qua JavaScript về sự kiện cuộn, đây chính là thứ chúng ta cần.

Mã Javascript
const scrollContainer = document.querySelector('main');

scrollContainer.addEventListener('wheel', (evt) => {
  // The magic happens here.
});

Chúng tôi cần biết hướng người dùng cuộn đến và số lượng họ đã cuộn. Vì vậy, làm thế nào để chúng tôi làm điều đó?

Chúng tôi sẽ sử dụng thuộc deltaY tính của đối tượng sự kiện mà chúng tôi nhận được trên tham số (evt).

Sự kiện wheel có 4 thuộc tính và deltaY đại diện cho số lượng cuộn dọc. Vì vậy, chúng tôi sẽ sử dụng chính xác cùng một giá trị đó để cuộn cùng một số lượng nhưng lần này theo chiều ngang.

Chúng tôi sẽ cập nhật thuộc scrollLeft tính của vùng chứa có thể cuộn (main) để nó cuộn theo chiều ngang.

Mã Javascript
const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});

Các deltaY bất động sản có thể là tích cực tiêu cực quặng. Khi nó là tích cực nghĩa là người dùng đang cuộn lên và khi nó là tiêu cực, người dùng đang cuộn xuống. Vì vậy, trong trường hợp của chúng tôi, khi họ cuộn lên, chúng tôi muốn cuộn sang trái và khi họ cuộn xuống, chúng tôi muốn cuộn sang phải.

Sự kiện scrollLeft hoạt động chính xác với cùng một ý tưởng trong đầu. Khi được áp dụng cho phần tử có thể cuộn, giá trị âm có nghĩa là chúng ta sẽ cuộn phần tử có thể cuộn sang trái và giá trị dương có nghĩa là chúng ta sẽ thực hiện theo hướng ngược lại, sang phải. Vì vậy, về cơ bản chúng tôi chỉ định deltaY giá trị cho thuộc scrollLeft tính và chúng tôi đã sẵn sàng!

Chỉ một nốt nhạc. Đừng nhầm lẫn sự kiện wheel với sự kiện mousewheel, sự kiện sau này đã không còn được dùng nữa.