点击发表图标评论，滚动到评论区

最新推荐文章于 2023-04-15 22:21:48 发布

JkKing...

最新推荐文章于 2023-04-15 22:21:48 发布

阅读量443

点赞数

文章标签： vue.js web

本文链接：https://blog.csdn.net/weixin_51952807/article/details/116402378

版权

本文介绍如何在web应用中，通过Vue.js实现用户点击发表评论按钮后，页面自动滚动到评论区域，提升用户体验。讨论了关键的Vue指令和事件监听，以及与DOM交互的技巧。

摘要由CSDN通过智能技术生成

   lookComFn () {
      // 点击 - 显示评论区顶端
      // 1. 点击直接滚动过去
      // 思路: window.scollTo 设置Y轴滚动值, 滚动值就是文章内容的高度
      // window.scollTo(x坐标, y坐标) - 把滚动条滚动到指定位置 (左上角是0, 0)
      // window.scrollTo(0, document.querySelector('.article-container').offsetHeight)

      // 2. 点击滚动带动画(JS动画)
      // const now = window.scrollY // 获取当前评论已经滚出去(卷起)的Y值
      // const dist = document.querySelector('.article-container').offsetHeight // 文章高度-就是你要滚动的距离
      // const step = dist / 10 // 步长(一次迈(滚动)出去的距离)

      // setTimeout(() => {
      //   if (dist < now + step) {
      //     return
      //   }
      //   window.scrollTo(0, now + step) // 在上一次滚动的距离+本次要滚的
      //   this.lookComFn()
      // }, 300)

      // 3. 缓冲动画(先快后慢)(在上面滚动到下面)
      // const now = window.scrollY // 已(卷起)的Y值(每次都变)
      // const dist = document.querySelector('.article-container').offsetHeight // 文章高度-就是你要滚动的距离(每次固定)
      // const step = (dist - n