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

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监听页面滚动事件
document.addEventListener("scroll", handleScroll, false);

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

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

const [show, setShow] = useState(false)

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

前言：我需要监听鼠标是向上还是向下滚动，结果在浏览器兼容上碰壁了，参考博客分析得挺好的

正文：

1，在各个浏览器的表现

浏览器	事件监听	滚轮事件	滚动方向
Chrome	addEventListener	onmousewheel	event.wheelDelta	正值向上，负值向下
IE	attachEvent	onmousewheel	event.wheelDelta
Firefox	addEventListener	DOMMouseScroll	event.detail	正值向下，负值向上

2，代码

window.onload = function () {
        var oDiv = document.getElementById('div1');
 
        function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }

转载于:https://www.cnblogs.com/huashengweilong/p/10961774.html

获取需要绑定事件的元素，可以是整个网页文档，也可以是某个特定的元素。例如，使用以下代码获取整个文档对象：

let doc = document.documentElement;
二、使用addEventListener函数为该元素添加mousewheel或DOMMouseScroll事件的监听器。这两个事件分别在不同的浏览器中使用，使用以下代码监听这两个事件：

if (doc.addEventListener) { 
// 此处是 mousewheel 事件，其他浏览器可能需要换成 DOMMouseScroll 
doc.addEventListener('mousewheel', handleMouseWheel, false); } 
else { 
// 兼容IE8及更早版本 
doc.attachEvent('onmousewheel', handleMouseWheel); 
}

三、定义事件处理函数handleMouseWheel，该函数会接收到一个事件对象event。通过检查event.deltaY属性可以确定鼠标滚轮滚动的方向，例如：

function handleMouseWheel(event) { 
var delta = event.deltaY; 
if (delta < 0) { 
// 鼠标往上滚动 
} 
else if (delta > 0) { 
// 鼠标往下滚动 } 
}