Skip to content

siaikin/sync-scroll

Repository files navigation

Sync Scroll

GitHub stars GitHub followers GitHub forks GitHub watchers GitHub last commit NPM npm

这是一个基于片段的同步滚动插件。

请查看Github上的Demo页,上面有具体的效果。 如果你不关心实现的方式,请直接看Usage

片断

// 片段start
# 这表示一个片段的开始
这些是片段内容
这些也是片段内容
// 片段end

如果你想要使用它让你的内容能进行同步滚动,你需要让你的内容符合以上的布局。这种布局很多Markdown格式的文本都是天然符合的,不过就是标题-内容-标题-内容...

示例:

# 文章标题
标题下的内容...
# 文章标题2
标题下的内容2...
...

其实这个页面就是一个很好的例子,当你滚动滚轮或滚动条的时候,注意一下以#号开头的段落,应该能看到左右两边的滚动距离是不同的。

Usage

如果想让SyncScroll正常运行,需要你用一个块级元素包裹你的内容,你可以按F12查看此页的代码。

我用<div>包裹了里面的内容,还有设置overflow: autoposition: reactive。 请务必设置overflow和position,overflow我想不必多说,它决定了是否能进行滚动。

对于position,因为我使用HTMLElement.offsetTop来获取片段的偏移高度, 而offsetTop依赖于最近的定位元素。如果你不将包裹的元素设置为定位元素,将无法获取到正确的offsetTop

下面我们进入正题,md-sync-scroll的用法很简单,你只需要将要进行同步的元素和查询子元素的查询语句 传入addArea(el, queryCriteria)方法中就好了。然后如果你改变了其中的内容,请调用update()方法以更新内容。

  1. 首先引入
import {SyncScroll} from "md-sync-scroll";
  1. 设置要进行同步的DOM元素。你需要指定每个Area的子元素查询条件。

在内部我使用querySelectorAll来查询子元素。所以你需要传入符合css选择器语法的字符串。

import {SyncScroll, ConfigOptions} from "md-sync-scroll";

const editArea = document.getElementById('edit');
const previewArea = document.getElementById('preview');
// 通过ConfigOptions可以配置参数,详细信息见下文API->ConfigOptions
const options = ConfigOptions.instance({
     syncWithClick: true,
     offsetScroll: 100
});
const syncScroll = new SyncScroll(options);

// 对于本页面来说,我用`h1-6`指示片段的开始,那么我就要查询被我指定为`h1-h6`的元素
// 在左边我用class='h1-6'标记,在右边用<h1>-<h6>表示
// syncScroll.addArea(editArea, '.h1,.h2,.h3,.h4,.h5,.h6');
// syncScroll.addArea(previewArea, 'h1,h2,h3,h4,h5,h6');
syncScroll.addAreas([
    {
        area: editArea,
        queryCriteria: '.h1,.h2,.h3,.h4,.h5,.h6'
    },
    {
        area: previewArea,
        queryCriteria: 'h1,h2,h3,h4,h5,h6'
    }
]);
// 可以调用`addArea`单个添加,在`addArea`调用后,需要手动调用`update`更新数据
// syncScroll.addArea({
//     area: editArea,
//     queryCriteria: '.h1,.h2,.h3,.h4,.h5,.h6'
// });
// syncScroll.addArea({
//     area: previewArea,
//     queryCriteria: 'h1,h2,h3,h4,h5,h6'
// });
// syncScroll.update();

API

SyncScroll

PROPERTY

Prop name Type Default Description
areas Array null Area的数组
controller ScrollControl null 内部的control类,正常使用请不要碰它,主要作用是关联各个Area

FUNCTION

Func name Params Description
SyncScroll options? 构造函数,options类型为ConfigOptions
addAreas [{el, queryCriteria}, ...] 添加多个Area,指定Dom元素el,和子元素查询语句,会自动调用更新方法。
addArea {el, queryCriteria} 添加一个Area,指定一个Dom元素el,和子元素查询语句
update null Area内容改变时调用,更新所有的Area
destroy null 销毁实例

ConfigOptions

PROPERTY

Prop name Type Default Description
syncWithLick boolean false click事件是否触发滚动
offsetScroll number 0 滚动对齐位置的偏移量,默认在顶部即0

FUNCTION

Func name Params Description
instance {syncWithClick, offsetScroll} 获取一个实例,参数为上面PROPERTY的参数,例子在上文usage第2项
ConfigOptions {syncWithClick, offsetScroll} 推荐使用instance来获取ConfigOptions来获取对象能稍微减小内存开销。构造函数,参数为上面PROPERTY的参数

有BUG请务必提issue,或者联系我abc1310054026@163.com