js页面滚动，设置锚点，控制页面滚动到某个节点位置

天蒙蒙亮

已于 2023-12-25 00:32:18 修改

阅读量4.5k

点赞数 2

分类专栏： React js 文章标签： javascript

于 2022-10-17 23:51:30 首次发布

本文链接：https://blog.csdn.net/qq_38719039/article/details/127379657

版权

React 同时被 2 个专栏收录

62 篇文章 3 订阅

订阅专栏

45 篇文章 1 订阅

订阅专栏

1.获取某Dom元素，距离其上级为position:relation元素的顶部距离
元素在上级为position:relation元素里的坐标 - 页面滚动的距离
获取元素距离relation元素顶部的距离 = dom.ofisetTop - window.pageYOffset;
元素自身的高度：dom.offsetHelght;
2.页面滚动
const dom = document.getElementByld(`${id}`)
window.scrollTo({
top: dom.offsetTop, //需要滚动的距离
behavior: 'smooth',
})

react监听鼠标滚轮事件 -> 锚点按钮状态
const handleScroll = (e)=>{ }
componentDidMount(){
//监听火狐鼠标滚动事件
document.addEventListener("DOMMouseScrol", handleScroll, false);
//监听谷歌苹果浏览器滚动事件
document.addEventListener("mousewheel", handleScroll, false);
}
componentWillUnmount(){
document.removeEventListener("DOMMouseScroll", handleScroll);
document.removeEventListener("mousewheel", handleScroll);
}

3. 判断某个元素是否滚动到某个位置范围时，才显示数据。

const [show, setShow] = useState(false)

const judgeDistanceTop =()=> {
 let dom= document.getElementById('home_content_statistic');
 if (anchorElement) {
  // 判断元素距离顶部的滚动距离范围。
  const scrollDistance = dom.offsetTop - window.pageYoffset;
  if (scrollDistance > -100 && scrollDistance <= 460) {
    setShow(true);
  }
 }
}
/**
* 模拟鼠标滚轮事件触发
*/
useEffect(()=> {
  const timer = setInterval(()=>{ judgeDistanceTop()}, 100)
  return ()=>{
    clearInterval(timer)
  }
}, [])