<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test {
width: 210px;
height: 200px;
overflow: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="test" class="test">
<!-- <img src="./images/t1.png"> -->
五合一全平台小程序开发, 微信、支付宝、抖音、百度、 可以帮助商户在指定地点, 向周边用户展示小程序,让8亿 用户触手可及。 五合一全平台小程序开发, 微信、支付宝、抖音、百度、 可以帮助商户在指定地点, 向周边用户展示小程序,让8亿 用户触手可及。 五合一全平台小程序开发, 微信、支付宝、抖音、百度、 可以帮助商户在指定地点, 向周边用户展示小程序,让8亿 用户触手可及。 五合一全平台小程序开发, 微信、支付宝、抖音、百度、 可以帮助商户在指定地点, 向周边用户展示小程序,让8亿 用户触手可及。
</div>
<script>
$.fn.scrollUnique = function() {
return $(this).each(function() {
var eventType = 'mousewheel';
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
$(this).on(eventType, function(event) {
// 一些数据
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientHeight;
var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
// IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
this.scrollTop = delta > 0 ? 0 : scrollHeight;
// 向上滚 || 向下滚
event.preventDefault();
}
});
});
};
$('#test').scrollUnique();
</script>
</body>
</html>
子元素滚动,父元素不滚动
最新推荐文章于 2024-03-19 17:28:23 发布