美文网首页
vue 列表滚动条和safari自带滚动条冲突问题

vue 列表滚动条和safari自带滚动条冲突问题

作者: 兜兜里冒糖糖 | 来源:发表于2021-01-05 16:43 被阅读0次

在普通的html页面中消除safari 自带的滚动条 只需要给body加一个overflow: hidden;就行了,
在vue 页面中 也是如此,只是在单独页面中加稍微麻烦一点,
如果页面没有使用keep-alive 缓存的话

 //创建前设置
    beforeCreate () {
      document.querySelector('body').setAttribute('style', 'overflow:hidden;')
    },
 //销毁前清除
    beforeDestroy () {
      document.querySelector('body').removeAttribute('style')
    },      

如果使用了缓存 beforeDestroy 会不执行, 可以换成

    //路由进入之前
    beforeRouteEnter (to, from, next) {
      document.querySelector('body').setAttribute('style', 'overflow:hidden;')
      next();
    },
    //路由离开之前
    beforeRouteLeave (to, from, next) {
      document.querySelector('body').removeAttribute('style')
        next();
    },

相关文章

网友评论

      本文标题:vue 列表滚动条和safari自带滚动条冲突问题

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