Categories
Quasar

Developing Vue Apps with the Quasar Library — Scroll Observer

Spread the love

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Scroll Observer

We can watch the scroll position of the scroll container with the q-scroll-observer component.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div class="q-pa-md">
          <div class="scroll overflow-scroll" style="height: 100px;">
            <div v-for="n in 100">lorem ipsum</div>
            <q-scroll-observer @scroll="onScroll"></q-scroll-observer>
          </div>

           <div>{{scrollInfo}}</div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          scrollInfo: {}
        },
        methods: {
          onScroll(info) {
            this.scrollInfo = info;
          }
        }
      });
    </script>
  </body>
</html>

We add the q-scroll-observer component and listen to the scroll event with it.

Then we get the info from the onScroll event handler.

The info parameter is something like:

{ "position": 1100, "direction": "down", "directionChanged": false, "inflexionPosition": 0 }

position has the scroll position in pixels.

direction has the scroll direction.

directionChanged tells us whether the scroll direction has changed.

inflexionPosition is the last scroll position where the user changed the scroll position.

We can also add the v-scroll position to watch the scroll position:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div class="q-pa-md">
          <div class="scroll overflow-scroll" style="height: 100px;">
            <div v-for="n in 100">lorem ipsum</div>
            <div v-scroll="onScroll"></div>
          </div>

          <div>{{scrollInfo}}</div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          scrollInfo: {}
        },
        methods: {
          onScroll(info) {
            this.scrollInfo = info;
          }
        }
      });
    </script>
  </body>
</html>

We get the scroll position with the info parameter.

The q-scroll-observer also works inside the q-scroll-area component:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div class="q-pa-md">
          <q-scroll-area style="height: 100px;" class="bg-yellow">
            <div v-for="n in 100">lorem ipsum</div>
            <q-scroll-observer @scroll="onScroll"></q-scroll-observer>
          </q-scroll-area>

          <div>{{scrollInfo}}</div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          scrollInfo: {}
        },
        methods: {
          onScroll(info) {
            this.scrollInfo = info;
          }
        }
      });
    </script>
  </body>
</html>

We can also watch horizontal scrolling with the horizontal prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div class="q-pa-md">
          <div
            class="scroll overflow-scroll"
            style="width: 90vw; height: 100px;"
          >
            <span v-for="n in 1000">{{n}}</span>
            <q-scroll-observer
              horizontal
              @scroll="onScroll"
            ></q-scroll-observer>
          </div>

          <div>{{scrollInfo}}</div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          scrollInfo: {}
        },
        methods: {
          onScroll(info) {
            this.scrollInfo = info;
          }
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add the Quasar’s q-scroll-observer component to watch the scroll position in our Vue app.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *