ScrollBooster

如何拿到原生事件对象

shouldScroll: function (data, event) {} 第二个形参

文本输入框无法输入文本的问题

initScrollBooster: function() {
  const viewportEl = document.querySelector("#drag-container");
  let sb;

  sb = new ScrollBooster({
    // textSelection: true,
    viewport: viewportEl,
    emulateScroll: true,
    // bounce: true,
    onUpdate: function(data) {
      console.error(`data.position.y: ${data.position.y}`);
      console.error(`data.position.x: ${data.position.x}`);
      viewportEl.scrollTop = data.position.y;
      viewportEl.scrollLeft = data.position.x;
    },
    // onClick: function (data, event) {
    //   console.log(data);
    // },
    // pointerdown: function (data, event) {
    //   console.log(data, event);
    // },
    shouldScroll: function (data, event) {
      console.log(data);
      console.log(event);
    }
  });

  console.log(sb);

  sb.setPosition({ x: 0, y: 0 });
},

会回弹的问题

inner 没宽度导致的，图片加载需要时间，期间 inner 没宽高，因此发生回弹

解决办法：

1. 当子元素为图片等资源时设置定时器
2. 直接给 inner 设置宽高

ScrollBooster回弹.gif

<template>
  <div id="scroll">
    <div class="wrapper">
      <div class="inner">
      <img src="../assets/bread.jpg" />
      </div>
    </div>
  </div>
</template>

<script>
  import ScrollBooster from "scrollbooster";

  export default {
    name: "ScrollBoooster",
    mounted: function () {
      // setTimeout(() => {
        // 需要等到图片加载完成后才能正常运行
        const viewportEl = document.querySelector("#scroll .wrapper");
        let sb;

        sb = new ScrollBooster({
          viewport: viewportEl,
          emulateScroll: true,
          onUpdate: function (data) {
            console.log(data.position.y)
            console.log(data.position.x)
            viewportEl.scrollTop = data.position.y;
            viewportEl.scrollLeft = data.position.x;
          }
        });

        console.log(sb)

        sb.setPosition({ x: 200, y: 200 });
      // });
    }
  }
</script>

<style lang="less">
  body {
    background-color: #2B2B2B;
  }

  #testapp {
    padding: 50px;
    text-align: center;
  }

  .wrapper {
    overflow: hidden;
    margin: auto;
    width: 1400px;
    height: 700px;
    border: 2px solid orange;
  }

  .inner {
    background: skyblue;
    width: 3000px;
    height: 1000px;
  }

  #scroll .wrapper {
    overflow: scroll;

  }
</style>

image.png

https://github.com/MonguDykrai/scroll-booster-vue
https://github.com/ilyashubin/scrollbooster