js,鼠标上下滑轮或者拉动滚动条触发事件

windowonmousewheel = function(){  //触发滚轮事件

}

windowonscroll = function(){  //滚动条事件

}

//其实你的问题直接使用判断滚动条应该就可以了，但是如果一定要拖动滚动条才执行事件，我们可以通过获取鼠标位置来模拟

var a = documentgetElementsByTagName("html")[0];

windowonmousemove = function(){

        //一般默认滚动条12px宽，当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条

if(innerWidth - eventclientX < 12){

aonmousedown = function(){

consolelog(1);

}

}else{

aonmousedown = null;

}

}

目标描述：多个排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图

知识点：onmousewheel，addEventListener，scrollTo，setTimeout

过程：

1body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看

2放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）

3制作相对于视窗的按钮，几张就几个按钮，（position: fixed;计算一下高度，可以利用calc计算top使得上下居中）

4美化一下，css写写

5先写简单的按钮事件

6写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)

react在componentDidMount的时候监听

7补充写一下火狐的

9测试检查一下。

完成啦，啦啦啦～

我的截图：

缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。

ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。

<DIV ID=oDiv STYLE="overflow:scroll; width:200; height:100"> </DIV>

<BUTTON onclick="alert(oDivclientHeight)">client height</BUTTON>

<BUTTON onclick="alert(oDivoffsetHeight)">offset heightY</BUTTON>

这段代码你应该看得懂，这里你要搞清楚四个属性：

clientHeight：获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

clientWidth：获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

offsetHeight：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。

offsetWidth：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

详细的属性请参阅Dhtml手册

<div id="myDiv"></div>

<script type="text/javascript">

documentgetElementById("myDiv")clientHeight>600 {documentgetElementById("myDiv")styleoverflow="scroll";} : {documentgetElementById("myDiv")styleoverflow="none";};

</script>

以上就是关于js,鼠标上下滑轮或者拉动滚动条触发事件全部的内容，包括:js,鼠标上下滑轮或者拉动滚动条触发事件、js控制页面滚动（实例）、javascript如何获得div去掉滚动条部分的高和宽等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！