PC端浮层内部滚动窗体不滚动的JS处理
html:
<div class="container">
<div class="box">
<div class="text"></div>
</div>
</div>
css:
<style>
*{ padding:0; margin:0; }
.container{ width:100%; height:5000px; }
.box{ width:200px; height:300px; background: pink; overflow: auto }
.text{ width:150px; height:3000px; background: yellow; }
</style>
js:
<script>
/*
* 阻止浏览器的默认行为 : event.preventDefault()
* 老IE浏览器 : event.returnValue = false
* jQuery : event.preventDefault()
* 在PC端，绝大多数滚动都是鼠标滚动触发的（上下快捷键也可以滚动页面，但一般人不知道），因此，我们可以从鼠标滚轮事件入手
*/
$.fn.scrollUnique = function() {
return $(this).each(function() {
var eventType = 'mousewheel';
// 火狐是DOMMouseScroll事件
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();
}
});
});
};
// 在这里调用,谁滚动用谁调用
$('.box').scrollUnique();
</script>
移动端浮层内部滚动窗体不滚动的JS处理
html:
<a href="javascript:" id="button" class="button">点击我出现浮层容器滚动没有阻止</a>
<a href="javascript:" id="buttonWith" class="button">点击出现浮层并开启阻止容器滚动</a>
<div id="aside" class="aside">
<i class="aside-overlay hideAside"></i>
<div class="aside-content">
<div class="module-main scrollable">
<div style="width:100px;height:500px;background: pink">1234567890</div>
</div>
</div>
</div>
css:
<style>
*{
padding:0;
margin:0;
}
.button {
display: block;
width: 240px; line-height: 30px;
margin: 20px auto;
background-color: #cd0000;
color: #fff;
text-align: center;
}
.aside,
.aside-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
.aside {
-webkit-transition: visibility .25s;
transition: visibility .25s;
z-index: 3;
visibility: hidden;
overflow: hidden;
}
.aside.active {
-webkit-transition: none;
transition: none;
visibility: visible;
}
.aside-overlay {
background-color: black;
opacity: 0;
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.active > .aside-overlay {
opacity: .6;
}
.aside .module-main {
position: absolute;
left: 0; right: 0;
top: 44px; bottom: 92px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.aside .scrollable {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.aside-content {
position: absolute;
bottom: 0; right: 0;
background-color: white;
-webkit-transition: transform .15s;
transition: transform .15s;
left: 40px; top: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.active > .aside-content {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
.noscroll,
.noscroll body {
overflow: hidden;
}
.noscroll body {
position: relative;
}
</style>
js:
<script>
var elButton = $('#button'), elButtonWith = $('#buttonWith');
var elAside = $('#aside');
elButton.on('click', function () {
elAside.addClass('active');
$('html').addClass('noscroll');
});
elButtonWith.on('click', function() {
elAside.addClass('active');
$.smartScroll(elAside, '.scrollable');
elButton.html(elButton.html().replace('没有', '已经'));
$('html').addClass('noscroll');
});
$('.hideAside').on('click', function () {
$('html').removeClass('noscroll');
elAside.removeClass('active');
});
/*
* 移动端浮层内部滚动 窗体不滚动
*/
$.smartScroll = function(container, selectorScrollable) {
// 如果没有滚动容器选择器，或者已经绑定了滚动时间，忽略
if (!selectorScrollable || container.data('isBindScroll')) {
return;
}
// 是否是搓浏览器
// 自己在这里添加判断和筛选
var isSBBrowser;
var data = {
posY: 0,
maxscroll: 0
};
// 事件处理
container.on({
touchstart: function (event) {
var events = event.touches[0] || event;
// 先求得是不是滚动元素或者滚动元素的子元素
var elTarget = $(event.target);
if (!elTarget.length) {
return;
}
var elScroll;
// 获取标记的滚动元素，自身或子元素皆可
if (elTarget.is(selectorScrollable)) {
elScroll = elTarget;
} else if ((elScroll = elTarget.parents(selectorScrollable)).length == 0) {
elScroll = null;
}
if (!elScroll) {
return;
}
// 当前滚动元素标记
data.elScroll = elScroll;
// 垂直位置标记
data.posY = events.pageY;
data.scrollY = elScroll.scrollTop();
// 是否可以滚动
data.maxscroll = elScroll[0].scrollHeight - elScroll[0].clientHeight;
},
touchmove: function () {
// 如果不足于滚动，则禁止触发整个窗体元素的滚动
if (data.maxscroll <= 0 || isSBBrowser) {
// 禁止滚动
event.preventDefault();
}
// 滚动元素
var elScroll = data.elScroll;
// 当前的滚动高度
var scrollTop = elScroll.scrollTop();
// 现在移动的垂直位置，用来判断是往上移动还是往下
var events = event.touches[0] || event;
// 移动距离
var distanceY = events.pageY - data.posY;
if (isSBBrowser) {
elScroll.scrollTop(data.scrollY - distanceY);
elScroll.trigger('scroll');
return;
}
// 上下边缘检测
if (distanceY > 0 && scrollTop == 0) {
// 往上滑，并且到头
// 禁止滚动的默认行为
event.preventDefault();
return;
}
// 下边缘检测
if (distanceY < 0 && (scrollTop + 1 >= data.maxscroll)) {
// 往下滑，并且到头
// 禁止滚动的默认行为
event.preventDefault();
return;
}
},
touchend: function () {
data.maxscroll = 0;
}
});
// 防止多次重复绑定
container.data('isBindScroll', true);
};
/*
* /移动端浮层内部滚动 窗体不滚动
*/
// 调用: $.smartScroll(container, selectorScrollable)
// container是父级对象 形式: $('.container')
// selectorScrollable是子集对象 形式: '.box'
</script>
网友评论