拖拽滚动(使用 PointerEvent 统一处理鼠标和触摸事件) DragScroll
const container = document.getElementById('scrollContainer');const dragScroll = new DragScroll(container, { width: '300px', height: '500px', content: '<div>...</div>',}); Copy
const container = document.getElementById('scrollContainer');const dragScroll = new DragScroll(container, { width: '300px', height: '500px', content: '<div>...</div>',});
容器元素 classname drag-scroll-container
内容容器元素 classname drag-scroll-content
当前平移 Y 位置
是否正在拖拽
配置项
滚动速度
内容是否可滚动
获取容器高度
const height = dragScroll.height; Copy
const height = dragScroll.height;
只读属性
获取容器宽度
const width = dragScroll.width; Copy
const width = dragScroll.width;
销毁方法，用于清理资源
dragScroll.destroy();dragScroll = null; Copy
dragScroll.destroy();dragScroll = null;
设置 HTML 内容
HTML 字符串或返回 HTML 字符串的函数
dragScroll.innerHtml('<div>New Content</div>');dragScroll.innerHtml(() => '<div>Dynamic Content</div>'); Copy
dragScroll.innerHtml('<div>New Content</div>');dragScroll.innerHtml(() => '<div>Dynamic Content</div>');
设置容器尺寸
Optional
容器宽度
容器高度
dragScroll.resize(500, '400px');dragScroll.resize('80%', '600px'); Copy
dragScroll.resize(500, '400px');dragScroll.resize('80%', '600px');
Y轴滚动到指定位置
Y轴平移值 （需正值不支持负值）
dragScroll.scrollToY(200);dragScroll.scrollToY(0); // 平移到顶部dragScroll.scrollToY(-2); // 无效 Copy
dragScroll.scrollToY(200);dragScroll.scrollToY(0); // 平移到顶部dragScroll.scrollToY(-2); // 无效
拖拽滚动(使用 PointerEvent 统一处理鼠标和触摸事件) DragScroll
Example