这是一个基于片段的同步滚动插件。
请查看Github上的Demo页，上面有具体的效果。 如果你不关心实现的方式，请直接看Usage
// 片段start
# 这表示一个片段的开始
这些是片段内容
这些也是片段内容
// 片段end如果你想要使用它让你的内容能进行同步滚动，你需要让你的内容符合以上的布局。这种布局很多Markdown格式的文本都是天然符合的，不过就是标题-内容-标题-内容...
示例：
# 文章标题
标题下的内容...
# 文章标题2
标题下的内容2...
...其实这个页面就是一个很好的例子，当你滚动滚轮或滚动条的时候，注意一下以#号开头的段落，应该能看到左右两边的滚动距离是不同的。
如果想让SyncScroll正常运行，需要你用一个块级元素包裹你的内容，你可以按F12查看此页的代码。
我用<div>包裹了里面的内容，还有设置overflow: auto和position: reactive。
请务必设置overflow和position，overflow我想不必多说，它决定了是否能进行滚动。
对于position，因为我使用HTMLElement.offsetTop来获取片段的偏移高度，
而offsetTop依赖于最近的定位元素。如果你不将包裹的元素设置为定位元素，将无法获取到正确的offsetTop。
下面我们进入正题，md-sync-scroll的用法很简单，你只需要将要进行同步的元素和查询子元素的查询语句
传入addArea(el, queryCriteria)方法中就好了。然后如果你改变了其中的内容，请调用update()方法以更新内容。
- 首先引入
import {SyncScroll} from "md-sync-scroll";- 设置要进行同步的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();| Prop name | Type | Default | Description |
|---|---|---|---|
| areas | Array | null | Area的数组 |
| controller | ScrollControl | null | 内部的control类，正常使用请不要碰它，主要作用是关联各个Area。 |
| 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 | 销毁实例 |
| Prop name | Type | Default | Description |
|---|---|---|---|
| syncWithLick | boolean | false | click事件是否触发滚动 |
| offsetScroll | number | 0 | 滚动对齐位置的偏移量，默认在顶部即0 |
| Func name | Params | Description |
|---|---|---|
| instance | {syncWithClick, offsetScroll} | 获取一个实例，参数为上面PROPERTY的参数，例子在上文usage第2项 |
| ConfigOptions | {syncWithClick, offsetScroll} | 推荐使用instance来获取ConfigOptions来获取对象能稍微减小内存开销。构造函数，参数为上面PROPERTY的参数 |
有BUG请务必提issue，或者联系我abc1310054026@163.com