【Nuxt】Nuxt3 中监听 document 滚动报错 document is not defined

最新推荐文章于 2024-04-30 17:56:54 发布

努力挣钱的小鑫

最新推荐文章于 2024-04-30 17:56:54 发布

阅读量456

点赞数 3

分类专栏： Vue.js 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/IAIPython/article/details/136261796

版权

Vue.js 专栏收录该内容

56 篇文章 5 订阅

订阅专栏

本文介绍了如何在JavaScript中使用`process.client`判断来控制在客户端渲染时，当页面滚动到一定位置时显示或隐藏链接按钮。通过`_.throttle`函数实现性能优化的滚动事件监听。

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

解决方法

添加 process.client 用于判断

// process.client 用于判断是否在客户端渲染
if (process.client) {
  _.throttle(() => {
    document.addEventListener('scroll', () => {
      // console.log('scroll', window.scrollY)
      const linkBtn = document.querySelector('.link-btn') as HTMLElement
      if (linkBtn) {
        // 当前页面是首页时，滚动到 864px 时显示右侧按钮
        if (window.location.pathname === '/') {
          if (window.scrollY > 864) {
            linkBtn.style.display = 'block'
          } else {
            linkBtn.style.display = 'none'
          }
        } else {
          linkBtn.style.display = 'block'
        }
      }
    })
  }, 100)()
}