Home > Article > Web Front-end > jQuery implements functional methods to respond to scroll bar events
jQuery implements functional methods to respond to scroll bar events
- 小云云Original
- 2018-01-29 10:22:041597browse
This article mainly introduces jQuery's function of responding to scroll bar events, which can realize real-time calculation and response functions for the scroll bar status. It has certain reference value. Friends who need it can refer to it. I hope it can help everyone.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
var lazyheight = 0;
//获取数据
function showload() {
lazyheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if ($(document).height() - 100 <= lazyheight) {
alert("xxx");
}
}
//showload();
//绑定事件
$(window).bind("scroll",
function() {
//当滚动条滚动时
showload();
});
})
</script>
</head>
<body>
<img src="1.jpg"/><br/>
<img src="2.jpg"/><br/>
<img src="3.jpg"/>
</body>
</html>Related recommendations:
HTMLHow to hide the scroll bar or remove the scroll bar
##html Scroll bar style settings
detailed examples of javaScript scroll bar events
The above is the detailed content of jQuery implements functional methods to respond to scroll bar events. For more information, please follow other related articles on the PHP Chinese website!