言

最近的一个项目做的是vue组件中的一个应用，「处理滚动列表」，这个应该是很常见的需求了，在项目中遇到的痛点，难点，如何一步步解决的，以及小细节一些优化。

借鉴某课的思路，仿QQ音乐效果，记录一下，自己字母解决这个难题，分享给你们，「希望对你们做移动端滚动列表问题有所帮助」

GitHub仓库

效果

处理滚动列表最终效果

从最终效果来看，实现了三个我的难点

• 第一个就是右侧快速入口，点击一个字母跳转到相应的部分
• 左上角的那个title是跟随字母一起修改内容的
• 向下滚动的话，会随时刷新右侧快速路口以及左上角字母title

接下来就是一步步去实现，优化上面的效果

第三方库介绍

better-scroll 移动端滚动的解决方案

vue-lazyload 图片懒加载

基本上实现上面的效果就是基于这两个第三方库

「better-scroll基本使用」

经常会遇到的问题就是初始化了，「还是不能滚动」。那么对于这个而言，我最近用到一些经验是什么呢？

我们先看常见的html结果

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling
</div>
复制代码

滚动的原理是什么

better-scroll原理说明

wrapper是父容器，它一定要有「固定高度」，content是内容区域，它是父元素的第一个元素，它content会随着内容的大小撑开而撑高，只有这个高度大于wrapper父容器高度时，才会出现滚动，也就是它的原理。

那么我们怎么去初始化呢

import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper,{})
//{}配置一些信息
复制代码

点这里有文档

接下来就开始把

从0到1完成

scroll组件

这个scroll组件是子组件，也可以算是个base组件，完成日常滚动的效果

<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'

  export default {
    props: {
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      listenScroll: {
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: null
      },
      pullup: {
        type: Boolean,
        default: false
      },
      beforeScroll: {
        type: Boolean,
        default: false
      },
      refreshDelay: {
        type: Number,
        default: 20
      }
    },
    mounted() {
      setTimeout(() => {
        this._initScroll()
      }, 20)
    },
    methods: {
      // 初始化Scroll
      _initScroll() {
        // 判断是否初始化
        if (!this.$refs.wrapper) {
          return
        }
        // 调用Scroll实例,表现可以滑动
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click
        })
        if (this.listenScroll) {
          let me = this
          this.scroll.on('scroll', (pos) => {
            me.$emit('scroll', pos)
          })
        }
        if (this.pullup) {
          this.scroll.on('scrollEnd', () => {
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
              this.$emit('scrollToEnd')
            }
          })
        }
        if (this.beforeScroll) {
          this.scroll.on('beforeScrollStart', () => {
            this.$emit('beforeScroll')
          })
        }
      },
      disable() {
        this.scroll && this.scroll.disable()
      },
      enable() {
        this.scroll && this.scroll.enable()
      },
      refresh() {  // 刷新scroll,重新计算高度
        this.scroll && this.scroll.refresh()
      },
      scrollTo() {
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() {
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      }
    },
    watch: {
      // 监听到数据的变化,就会重新去refresh数据,重新去计算响应的数据
      data() {
        setTimeout(() => {
          this.refresh()
        }, this.refreshDelay)
      }
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
复制代码

在父组件中导入即可

完成列表滚动

listview组件导入

<template>
  <scroll
    :listen-scroll="listenScroll"
    :probe-type="probeType"
    :data="data"
    class="listview"
    ref="listview"
  >
    <ul>
      <li v-for="(group,index) in data" class="list-group" ref="listGroup" :key="index">
        <h2 class="list-group-title">{{group.title}}</h2>
        <uL>
          <li
            @click="selectItem(item)"
            v-for="(item, index) in group.items"
            class="list-group-item"
            :key="index"
          >
            <img class="avatar" v-lazy="item.avatar" />
            <span class="name">{{item.name}}</span>
          </li>
        </uL>
      </li>
    </ul>
  </scroll>
</template>
复制代码

然后导入scroll组件即可，看看效果

处理滚动列表-实现列表滚动

上面在listview组件中导入scroll组件，完成基本的列表滚动效果，接下来，完善一步一步效果吧。

右侧快速入口

<div
      class="list-shortcut"
      @touchstart="onShortcutTouchStart"
      @touchmove.stop.prevent="onShortcutTouchMove"
    >
    <!-- data-index方便获取一个列表中的index -->
      <ul>
        <li
          v-for="(item, index) in shortcutList"
          :data-index="index"
          class="item"
          :class="{'current':currentIndex===index}"
          :key="index"
        >{{item}}</li>
      </ul>
    </div>
复制代码

点击右侧快速路口的话，会跳转到相应的title去，使用的方法就是

scrollElement

scrollToElement(el, time, offsetX, offsetY, easing)

「这个方法很方便的解决了我们第一个难点」，现在就差获取右侧快速路口的索引值了

给每一个li增加一个data-index属性名称，值为index下

:data-index="index"
复制代码

这样子每次就可以获取当前的索引值

有了索引值，我们就可以直接调用srcollToElement()方法，完成左侧的跳转效果。

this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0);
// 这个index就是获取到下标索引值,然后通过这个
// 这个第二个参数是滚动的动画的时间，我们默认为0就行，文档上面也有专门的说明，可以去看看。
复制代码

我们看看效果吧下

处理滚动列表-实现点击右侧跳转相应位置

接下来完成「touchMove事件」，我们绑定到div上

@touchmove.stop.prevent="onShortcutTouchMove"
// 两个修饰符阻止冒泡以及默认的事件
复制代码

思路

• 首先要监听touchStart事件一开始锚点，也就是anchorIndex，还有保存e.touches[0].pageY, y轴上的位置信息，记作y1
• 监听touchuMove事件，保存y轴距离，记为y2，这个时候y2-y1就是y轴上的距离变化dataChange
• 将这个距离dataChange除以高度，这里的高度，我选择的是每个li的content+padding高度，这个高度的话，正好是整个一个li元素高度，我觉得很合理，delta = dataChange/ANCHOR_HEIGHT
• 最后一开始的anchorIndex加上delta，就是最新的锚点，这个anchorIndex一定要取证，因为获取的可能是字符串。

看代码

 onShortcutTouchStart(e) {
        // 获取到右侧的列表索引值
      let anchorIndex = getData(e.target, "index");
      let firstTouch = e.touches[0];
      this.touch.y1 = firstTouch.pageY;   // 计入一开始y轴上的位置
      this.touch.anchorIndex = anchorIndex;   // 保存了每次点击的锚点
      this._scrollTo(anchorIndex);
    },
    // 监听的是TouchMove事件
    onShortcutTouchMove(e) {
      let firstTouch = e.touches[0];
      this.touch.y2 = firstTouch.pageY;
      // 滚动的两个差值 也就是y轴上的偏移
      // 除以每个高度，这样子的话，就知道偏移了几个锚点
      let delta = ((this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT) | 0;
      let anchorIndex = parseInt(this.touch.anchorIndex) + delta;

      this._scrollTo(anchorIndex);
    },
    
复制代码

效果怎么样呢，基本上点击和手势移动都较为完美的实现了。

处理滚动列表-实现手势移动右侧跳转相应位置

左右联动

左右联动的效果指的是左侧点击到某个区域，紧接着右侧快速路口也跳转到相应位置，这里其实指的就是高亮效果。

效果就是滑动列表，右侧的字母会相应的高亮，达到同步的作用，难点是什么呢？

ListGroup计算高度

从图片上面看，我们发现每个listGroup分组里面的成员是不固定的，所以我们怎么去获取到相应的currentIndex呢？

「我们可以获取到每次滚动的距离，那怎么样去获取相应的currentIndex呢，比如滑到K分组时，currentIndex是对应的下标?」

有个不错的思路：

• 我们去维护一个height[i]数组，该数组含义就是第i个分组的范围是height[i]~~heigth[i+1]
• 那么我们获取到滚动Y轴的距离，那么就可以确定它所在的范围，如果滚动的距离在posY>height[i]&&posY<height[i+1]，那么currentIndex就可以取值i，这样子好像行。

那么我们按照上面的思路来完善吧

 _calculateHeight() {
      // 这个方法就是计算每个listGroup高度
      this.listHeight = [];
      const list = this.$refs.listGroup;
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
复制代码

这个listHeigth数据就是我们维护的第i个分组的clientHeight距离

第二步，我们监控这个scrollY，这个变量表示的就是滚动的距离

watch: {
    // 每次去watch这个滚动的距离,
    scrollY(newY) {
      const listHeight = this.listHeight;
      // 当滚动到顶部，newY>0
      if (newY > 0) {
        this.currentIndex = 0;
        return;
      }
      // 在中间部分滚动
      for (let i = 0; i < listHeight.length - 1; i++) {
        let height1 = listHeight[i];
        let height2 = listHeight[i + 1];
        if (-newY >= height1 && -newY < height2) {
          this.currentIndex = i;
          this.diff = height2 + newY;
          return;
        }
      }
      // 当滚动到底部，且-newY大于最后一个元素的上限
      this.currentIndex = listHeight.length - 2;
    },
复制代码

这里需要提醒的就是，我们怎么去拿到这个scrollY滚动距离呢？

说到这个，我们得看到scroll组件中，阅读它的API，会发现它提供了on方法，该方法可以去监听该「实例的钩子函数」，所以我们去「监听钩子函数scroll」

「scroll钩子函数」

• 参数：{Object} {x, y} 滚动的实时坐标
• 触发时机：滚动过程中。

所以我们可以通过这个钩子来获取滚动的实时坐标

if (this.listenScroll) {
          let me = this
          this.scroll.on('scroll', (pos) => {
            // me指的就是实例
            // 通过监听scroll事件,有一个回调,pos是一个对象,有x,y轴的具体距离
            // 去派发一个scroll事件,这样子外部也就是父组件可以拿到我们的pos
            me.$emit('scroll', pos)
          })
        }
复制代码

这样子我们在子组件scroll中向外派发一个scroll事件，并且把「pos = {Object} {x, y} 滚动的实时坐标」向外传递，这样子的话，父组件通过@scroll="scroll" 就可以拿到这个坐标pos

这样子我们这个难点就解决了。

我们来看看效果

这样子基本上问题就解决了，但是呢还会遇到一个问题？

probeType

• 类型：Number
• 默认值：0
• 可选值：1、2、3
• 作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。

这个是文档上面的内容，我们可以看到这个配置项还是很重要的，我们listview组件需要通过props向子组件传递probeType值，值为3，这样子就可以「在滚动中实时派发 scroll 事件」。

 <scroll :probe-type='3'></scroll>
 // 当然了，这个probeTyep会在data中拿到
复制代码

总结

• 解决难点一，获取滚动的实时位置，通过子组件scroll实例on方法，去「监听钩子函数scroll」，然后向外去派发一个scroll函数，并且把滚动的距离传给父组件listview
• 解决难点二，获取到滚动Y轴的距离，就可以进一步去判断，它是落在哪一个listGroup中，也就是哪一个分组中，这样子就确定currentIndex。
• 通过watch监听scrollY值，表示Y轴滚动距离，发生变化时，更新currentIndex。
• 有了currentIndex，在判断currentIndex === index，就可以实现高亮效果
• 还有一些BetterScroll 提供的API 比如refresh(),重新计算 BetterScroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常scrollToElement(el, time, offsetX, offsetY, easing) 滚动到指定的目标元素on(type, fn, context) 监听当前实例上的钩子函数。如：scroll、scrollEnd 等
• 还有一个收获就是用第三方API，「有问题一定要查文档」。

咱给小编：

1. 点赞+评论

2. 点头像关注，转发给有需要的朋友。

您的支持是小编不断输出的动力，谢谢！！

CSS 和 JS 的原生平滑滚动

你想要一个平滑的滚动吗？ 忘记 JQuery，我们已经过去了。 让我向您介绍我们的原生平滑滚动工具。

CSS 滚动行为

CSS scroll-behavior 属性接受三个值之一 - 实际上是两个值，因为其中一个已被弃用。

1. scroll-behavior: auto 是我们已经习惯的默认即时滚动行为。
2. scroll-behavior:instant 与 auto 相同，这就是它被弃用的原因。 如果你想要它，只需使用自动。
3. scroll-behavior: smooth 在以编程方式触发滚动事件时应用平滑过渡。

我说“以编程方式触发”是因为它不会平滑滚动鼠标滚轮。

以编程方式触发滚动事件的一些方法是：

-    Window.scrollTo()
-    Window.scrollBy()
-    Element.scrollTo()
-    Element.scrollBy()
-    Element.scrollIntoView()
-    Element.scrollLeft = x
-    Element.scrollTop = y

我们将分别探索这些方法。

（注）Window.scroll() 和 Element.scroll()

也许你已经注意到我没有提到 scroll() 方法。

这是因为 Window.scroll() 和 Element.scroll() 实际上是与 Window.scrollTo() 和 Element.scrollTo() 相同的方法。为避免重复内容，我将仅参考 scrollTo()。在实践中，您可以使用任何一种，只需选择一个并保持一致。

Window.scrollTo() 和 Element.scrollTo()

此方法非常适合滚动到绝对坐标。如果您有要将用户滚动到的位置的 x 和 y 坐标，您可以简单地调用 window.scrollTo(x, y) ，它会尊重页面的 CSS 滚动行为。

这同样适用于可滚动元素。您只需调用 element.scrollTo(x, y) ，它就会尊重元素的 CSS 滚动行为。

这个方法还有一个新的签名，它使用一个对象而不是两个数字参数，通过这个新的签名，我们可以显式地设置我们的滚动行为。

// For window
window.scrollTo({
  left: x,
  top: y,
  behavior: 'smooth'
});
// For element
const el = document.querySelector(...);
el.scrollTo({
  left: x,
  top: y,
  behavior: 'smooth'
});

Element.scrollLeft 和 Element.scrollTop

设置元素 .scrollLeft 和 .scrollTop 属性与使用坐标调用 Element.scrollTo() 相同。 它将尊重元素的 CSS 滚动行为。

const el = document.querySelector(...);
const x = 100;
const y = 500;
// Setting .scrollLeft and .scrollTop with smooth scroll
el.style.scrollBehavior = 'smooth';
el.scrollLeft = x;
el.scrollTop = y;
// Is the same as calling Element.scrollTo()
el.scrollTo({ left: x, top: y, behavior: 'smooth' });

（注）负元素.scrollLeft

如果你的元素文本的方向是 rtl，scrollLeft = 0 表示水平滚动的最右边位置，并且随着你向左移动，值会减小。

对于宽度为 100px，可滚动宽度为 500px，方向为 rtl 的可滚动元素，最左边的位置是 scrollLeft = -400。

<div id="scrollable" style="width: 100px; overflow: auto" dir="rtl">
  <div style="width: 500px; height: 100px; background: green"></div>
</div>
<p id="output"></p>

const scrollable = document.querySelector('#scrollable');
const output = document.querySelector('#output');
const updateOutput = () => {
  output.textContent = `scrollLeft: ${scrollable.scrollLeft}`;
};
updateOutput();
scrollable.addEventListener('scroll', updateOutput);

Window.scrollBy() 和 Element.scrollBy()

此方法与 Window.scrollTo() 或 Element.scrollTo() 具有完全相同的签名。 它接受 x 和 y 作为两个数字参数或作为具有可选 left、top 和 behavior 属性的对象的单个参数。

这里的区别是我们不是传递绝对坐标，而是相对值。 如果我们 scrollBy({ top: 10 })，我们从当前位置向下滚动 10 个像素，而不是从页面开头向下滚动 10 个像素。

// For window
window.scrollBy({ top: 10 }); // Scroll 10px down
window.scrollBy({ left: 20 }); // Then 20px to the right
window.scrollBy({ top: 50 }); // And then 50px down
// For element
const el = document.querySelector(...);
el.scrollBy({ top: 10 }); // Scroll 10px down
el.scrollBy({ left: 20 }); // Then 20px to the right
el.scrollBy({ top: 50 }); // And then 50px down

(注) Window.scrollByLines() 和 Window.scrollByPages()

Firefox 更进一步，实现了滚动多行或多页的方法。 这是一个仅适用于 Firefox 的非标准功能，因此您可能不想在生产中使用它。

通过将 100vh（用于页面）和 1rem（用于行）转换为像素并将该值传递给 Window.scrollBy()，您可以在所有主要浏览器中实现类似的效果。

const toPixels = require('to-px'); // From NPM
const page = toPixels('100vh');
window.scrollBy(0, page); // window.scrolByPages(1)
const line = toPixels('1rem');
window.scrollBy(0, line); // window.scrolByLines(1)

Element.scrollIntoView()

但大多数时候，我们并不关心任何硬编码的坐标，我们只想将用户滚动到屏幕上的特定元素。 这可以通过 Element.scrollIntoView() 轻松（更明确地）完成。

可以不带参数调用此方法，它将滚动页面（尊重 CSS 滚动行为）直到元素在顶部对齐（除非元素在页面底部，在这种情况下，它会 尽可能滚动）。

<div style="height: 2000px">Some space</div>
<div id="target" style="background: green">Our element</div>
<div style="height: 500px">More space</div>

const target = document.querySelector('#target');
target.scrollIntoView();

您可以通过传递布尔值或对象来进一步自定义元素在视图中的位置。

const el = document.querySelector(...);
// Default, aligns at the top
el.scrollIntoView(true);
// Aligns at the bottom
el.scrollIntoView(false);
// Aligns vertically at the center
el.scrollIntoView({ block: 'center' });
// Vertical top and horizontal center
el.scrollIntoView({ block: 'start', inline: 'center' });
// Vertical bottom and horizontal right
el.scrollIntoView({ block: 'end', inline: 'end' });
// Vertical center and smooth
el.scrollIntoView({ block: 'center', behavior: 'smooth' });
// Vertical nearest
el.scrollIntoView({ block: 'nearest' });

当使用一个对象来定义元素的位置时，注意 block 是指垂直放置，而 inline 是指水平放置。此外，“最近”的位置可以是顶部/左侧或底部/右侧，以最近的为准，如果元素已经在视图中，它也可以是空的。

浏览器支持

{关于浏览器支持} 在撰写本文时，所有主流浏览器（Safari 除外）都支持平滑滚动和本文中描述的滚动方法。

如果你需要更多的保证，我在我的项目中使用了一个非常好的平滑滚动 polyfill。它填充了 scroll()、scrollTo()、scrollBy()、scrollIntoView() 和 CSS 滚动行为。它不支持通过设置 scrollLeft/scrollTop 来平滑滚动，也不支持 scrollIntoView() 选项（它总是在顶部对齐元素）。

如果你有更多的好奇心，我强烈建议你研究一下 polyfill 的源代码，总共不到 500 行。我做了一个 PR 来稍微改进文档，你可能会发现代码更容易理解。

祝你有美好的一天，很快见到你。