h5动画特效

咚咚咚咚队长
  • 54

经常在h5页面上有这么一种效果,拉动滚动条,相应部分的内容会左移或右移出现。这么长一个页面,难道一直监听window.scroll来根据滚动距离加上animate.css这种类来实现么?我没有做过h5,不知道其实现原理

回复
阅读 1.9k
1 个回答

可以监听滚动条,也可以判断元素在窗口是否可见

clipboard.png

var elm = document.getElementById('aaaaa')
var rect = elm.getBoundingClientRect();
//获取当前浏览器的视口高度,不包括工具栏和滚动条
//document.documentElement.clientHeight兼容 Internet Explorer 8、7、6、5
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
//bottom top是相对于视口的左上角位置
//bottom大于0或者top-视口高度小于0可见
console.log(!(rect.bottom < 0 || rect.top - viewHeight >= 0));
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏