//使用onClick事件调用即可 target 为滚动目标对象的id
jumpAndFlicker=(target)=>{
//找到对应组件 若存在执行滚动
let anchorElement = document.getElementById(`${target}`);
// behavior 定义滚动动画,默认值为auto。
// auto :没有动画直接跳转到对应处
// smooth: 有动画 平滑的滚动到对应处
// block 定义垂直方向的对齐 默认值为start.
// start,表示顶端对齐。
// center,表示中间对齐。
// end,表示底端对齐。
// nearest:
// 如果元素完全在视口内,则垂直方向不发生滚动。
// 如果元素未能完全在视口内,则根据最短滚动距离原则,垂直方向滚动父级容器,使元素完全在视口内。
// inline 定义水平方向的对齐,默认值为nearest。
// 参数同 bloack 显然 start end 分别变更为左端右端
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline :'start'
});
}
};
react 锚点 点击触发滚动
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- keyboardShouldPersistTaps={'handled'} keyboardShouldPersi...
- 前言:mmp网上搜的千篇一律,而且不好使!!!~~~坑啊。。 哎!!:亲自踩坑! 接下来实现:拦截tablayou...
- 最近在用creator做仓库背包的功能,我是用的scrollview来滑动展示, 然后放了许多道具预制体, 每个道...