vue中检测敏感词，锚点

时间：2022-09-28 06:45:46

当发布文章的时候，标题有敏感词

则检测有敏感词的接口成功的时候，写锚点

eg:vue中检测敏感词，锚点

_this
  .$alert("检测到标题有敏感词，请修改后再发布", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    showCancelButton: false,
    customClass: "applySuccessBox",
    cancelButtonClass: "cancelButtonClass",
    confirmButtonClass: "confirmButtonClass",
    showClose: false,
    center: true,
    lockScroll: false
  })
  .then(() => {
    var anchor = _this.$el.querySelector('#myTitle')
    document.body.scrollTop = anchor.offsetTop
这里应该再加一句话
document.documentElement.scrollTop = anchor.offsetTop
  })
  .catch(() => {});
在标题那里加个id=
myTitle
就可以了

*****************************************************************************************************************

上面这么做有bug，360急速模式可以滚动，但是谷歌切没法滚动，这就尴尬了啊

那是应为

谷歌浏览器只认识document.body.scrollTop;

注：标准浏览器是只认识

document.documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop
因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效
经过我实验谷歌只认识
document.documentElement.scrollTop
其他标准认识
document.body.scrollTop

区别在于
body是DOM对象里的body子节点，即 <body> 标签； 
documentElement 是整个节点树的根节点root，即<html> 标签； 
所以兼容写法
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
当你定义一个id作为锚点（能拿到苗点到顶部距离），点击时要跳到苗点的话就用
vue 中
let anchor = _this.$el.querySelector('#myTitle')

document.documentElement.scrollTop = anchor.offsetTop
document.body.scrollTop = anchor.offsetTop

相关文章