Valentine-Vue-Tailwind/node_modules/vue-observe-visibility/index.html

<html>
  <head>
    <style>
      body {
        font-family: sans-serif;
      }

      #app {
        padding: 100px;
      }

      .toolbar {
        position: fixed;
        bottom: 12px;
        left: 0;
        width: 100%;
      }

      .toolbar .wrapper {
        background: white;
        padding: 12px;
        border-radius: 3px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
        display: flex;
        align-items: center;
        border: #eee 1px solid;
      }

      .toolbar .wrapper > *:not(:last-child) {
        margin-right: 6px;
      }

      .separator {
        margin: 0 12px;
      }

      .info {
        color: #eee;
      }

      .test {
        background: #eee;
        height: 100%;
        border-radius: 3px;
        flex-direction: column;
      }

      .info,
      .test {
        font-size: 42px;
      }

      .test-wrapper {
        margin: 3000px 0;
        height: 400px;
      }

      .toolbar,
      .info,
      .test {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      input[type="number"] {
        width: 90px;
      }

      .number {
        display: inline-block;
        width: 40px;
        font-family: monospace;
        text-align: center;
        background: #eee;
        border-radius: 3px;
        padding: 4px 0;
      }
    </style>
  </head>
  <body>
      <div id="app">
        <div class="toolbar">
          <div class="wrapper">
            <input id="is-visible" type="checkbox" v-model="isVisible" disabled>
            <label for="is-visible">Is visible?</label>

            <input id="disabled" type="checkbox" v-model="disabled">
            <label for="disabled">Disable</label>

            <span class="separator"></span>

            <button class="toggle" @click="show = !show">Toggle</button>

            <span class="separator"></span>

            <label for="throttle">Throttle</label>
            <input id="throttle" type="number" v-model="throttle" min="0" step="100">

            <input id="throttle-leading-visible" type="checkbox" v-model="leadingVisible">
            <label for="throttle-leading-visible">Leading (Visible)</label>
            <input id="throttle-leading-hidden" type="checkbox" v-model="leadingHidden">
            <label for="throttle-leading-hidden">Leading (Hidden)</label>

            <span class="separator"></span>

            <label for="threshold">Threshold</label>
            <span class="number">{{ threshold }}</span>
            <input type="range" v-model="threshold" min="0" max="1" step="0.01">
            <input id="once" type="checkbox" v-model="once">
            <label for="once">Once</label>
          </div>
        </div>

        <div class="info">Scroll down</div>
        <div class="test-wrapper">
          <div
            v-show="show"
            ref="test"
            class="test"
            v-observe-visibility="disabled ? false : {
              callback: visibilityChanged,
              throttle,
              throttleOptions: {
                leading: leadingVisible && leadingHidden ? 'both' : leadingVisible ? 'visible' : leadingHidden ? 'hidden' : false,
              },
              intersection: {
                threshold,
              },
              once,
            }"
          >
            <div v-for="n in count">Hello world!</div>
          </div>
        </div>
      </div>


      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="./dist/vue-observe-visibility.min.js"></script>
      <script>
        // App
        new Vue({
          el: '#app',
          data: {
            show: true,
            isVisible: true,
            throttle: 0,
            leadingVisible: false,
            leadingHidden: false,
            threshold: 0,
            count: 1,
            once: false,
            disabled: false,
          },
          methods: {
            visibilityChanged: function (isVisible, entry) {
              this.isVisible = isVisible
              this.count++
              console.log('is visible:', isVisible, 'intersection:', Math.round(entry.intersectionRatio * 100) + '%')
            }
          }
        })
      </script>
  </body>

</html>