移动端浮层内滚动窗体不滚动的JS处理

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);
};
转至http://www.zhangxinxu.com/wordpress/2016/12/web-mobile-scroll-prevent-window-js-css/


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值