鼠标滑轮滚动到相应位置，对应位置的div触发一些效果实现方式

主要用到元素的getBoundingClientRect()方法，该方法是原生js提供的，getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

用法：首先要将需要做效果的div取出来，调用该方法，之后利用top和bottom距离视图顶部的距离限制一个区间，当屏幕滚动到该区间的时候就可以做一些效果。

1.语法：这个方法没有参数。

rectObject = object.getBoundingClientRect();

2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（上，右，下，和左）表示的坐标的矩形，以像素为单位。

　rectObject.top：元素上边到视窗上边的距离;

　rectObject.right：元素右边到视窗左边的距离;

　rectObject.bottom：元素下边到视窗上边的距离;

　rectObject.left：元素左边到视窗左边的距离;

示图：

3. 兼容性：我用ie11的Document Mode模式测试，ie5以上都能支持。

转载于:https://www.cnblogs.com/jiangze-blog/p/7844759.html

鼠标滑轮滚动到相应位置，对应位置的div触发一些效果实现方式相关推荐

vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
更改Windows鼠标滑轮滚动方向
经常在Mac和Windows PC切换的人往往会遇到这样一个问题,那就是鼠标滑轮的方向恰好相反.改变Mac的鼠标滑轮滚动方向很简单,系统偏好设置-鼠标-滚动方向,把"自然"的对勾勾 ...
图片随鼠标滑轮滚动变大变小
* 图片随鼠标滑轮滚动变大变小,最大不超过屏幕宽度-360 */ <HTML> <HEAD> <meta http-equiv="Content-Type&qu ...
java控制鼠标滑轮的滚动速度来滚动滚动面板和鼠标滑轮滚动事件
//虽然比较短,但还是分享下吧....就当是个随笔吧- //设置滚动面板的滚动速度 JScrollPane.getVerticalScrollBar().setUnitIncrement(10); / ...
鼠标滑轮滚动实现换页
windowAddMouseWheel(); function windowAddMouseWheel() { var i = 0;var j = 0;var scrollFunc = functio ...
vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面
内容: 一般要求鼠标禁止滑轮滚动页面时,需要实现页面点击滚动,跌跌撞撞,走了很多弯路实现了wwwwww vue代码: // 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.p ...
html鼠标滚轮监听,js鼠标滑轮滚动监听触发事件
判断鼠标滚动方向执行不同的事件代码,兼容IE.Firefox.chrome浏览器.javascript代码如下: var scrollFunc = function (e) { var direct ...
HTML 鼠标绑定滚动条,js鼠标滑轮滚动事件绑定（兼容主流浏览器）
今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式: 在 f ...
判断鼠标滑轮滚动事件
windowAddMouseWheel() {let that = thislet scrollFunc = function (e) {e = e || window.eventif (e.whee ...
鼠标滑轮滚动事件（记录下以后用到好找）
//兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该 ...

鼠标滑轮滚动到相应位置，对应位置的div触发一些效果实现方式

鼠标滑轮滚动到相应位置，对应位置的div触发一些效果实现方式相关推荐

最新文章

热门文章