點燈坊

失くすものさえない今が強くなるチャンスよ

Detecting Scrolling Direction

Sam Xiao's Avatar 2022-01-08

We don’t have scrollUp or scrollDown to detect scrolling detection in Alpine, but we can implement it with only 2 lines of JavaScript.

Version

Alpine 3.9
TailwindCSS 3.0

Scrolling Detection

scroll000

  • When scrolling down the scroll bar, it shows scroll down on the top of the page

  • When scrolling up the scroll bar, it shows scroll up on the top of the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Alpine</title>
  </head>
  <body
    x-data="{ scrollY_: 0, msg: '' }"
    @scroll.window="
      msg = scrollY > scrollY_ ? 'scroll down' : 'scroll up'
      scrollY_ = scrollY"
  >
    <div
      class="fixed top-0 left-0 h-6 w-full bg-black text-white"
      x-text="msg"
    ></div>
    <div class="mt-10">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos,
        dolore earum enim fuga ipsam iure molestiae, pariatur qui soluta tempora
        veniam veritatis. Et in ipsam itaque quaerat sint ut? Facere?
      </p>
    </div>
  </body>
</html>

Line 10

<body
  x-data="{ scrollY_: 0, msg: '' }"
  @scroll.window="
    msg = scrollY > scrollY_ ? 'scroll down' : 'scroll up'
    scrollY_ = scrollY"
>
  • scrollY_ : old scrollY to compare
  • msg : message to display scroll up or scroll down
  • scroll.window : since scroll event belongs to window, we have to add .window postfix on scroll event

Line 13

msg = scrollY > scrollY_ ? 'scroll down' : 'scroll up'
scrollY_ = scrollY
  • scrollY is window.scrollY, it returns the scroll bar offset from the top
  • If scrollY is larger than old scrollY_, it means scroll down. Otherwise, scroll up

Line 16

<div
  class="fixed top-0 left-0 h-6 w-full bg-black text-white"
  x-text="msg"
></div>
  • x-text : bind <div> to msg to show the final result

Conclusion

  • If we want to bind window event to Alpine, we have to add .window postfix on the event

# Alpine