滚动

作者: FeynmanNg | 来源:发表于2021-09-28 15:50 被阅读0次

例子

/* html (vue) */
...
<p @click="onScrollTo('#JCXX')">基础信息</p>
<div id="JCXX"></div>

/* script */
...
/* 点击p,浏览器将会滚动到div上 */
onScrollTo () {
    document.querySelector(name).scrollIntoView({
        behavior: 'smooth', // 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
        block: 'start', // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
        inline: 'nearest', // 定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
    });
}

参考链接:MDN-Element.scrollIntoView

相关文章

  • 监听scrollview停止滚动

    方法1 滚动开始 滚动结束: 手动停止滚动 自动停止滚动 方法2 滚动开始 滚动结束

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • CSS 隐藏滚动条 但可以滚动

    垂直滚动,用鼠标滚轮滚动 横向滚动 其他垂直滚动方法

  • UIScrollView常用方法

    -指定滚动视图的滚动尺寸。滚动视图正常工作必须要指定滚动视图的滚动尺寸 scrollView.contentSiz...

  • UIScrollView 代理

    滚动时执行 开始滚动时执行 滚动后手指离开屏幕时执行 滚动后手指离开后执行 手指后滚动时 滚动结束执行

  • scroll和wheel事件

    scroll 1 .scroll事件在滚动条滚动时被触发2 . scroll检测的是滚动条的滚动,当滚动条不能滚动...

  • 几种无限不间断滚动效果

    1.向上滚动 2.向下滚动 3.向左滚动 4.向右滚动

  • WeChat小程序视图篇~Scroll-view

    scroll-view 是什么? 微信小程序滚动视图,分为横向滚动,纵向滚动。以及滚动事件。 如何用? 纵向滚动-...

  • 微信小程序 - 6.组件(scroll-view)

    scroll-viewscroll-view组件为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设...

网友评论

      本文标题:滚动

      本文链接:https://www.haomeiwen.com/subject/pfsjnltx.html