Authored by 梁志锋

侧边栏滚动效果修改

... ... @@ -24,6 +24,103 @@ var start = 0,
lazyLoad($('img.lazy'));
function preventDefault(e) {
e = e || window.event;
e.preventDefault && e.preventDefault();
e.returnValue = false;
}
function stopPropagation(e){
e = e || window.event;
e.stopPropagation && e.stopPropagation();
e.cancelBubble = false;
}
function innerScroll(e){
// 阻止冒泡到document
// document上已经preventDefault
stopPropagation(e);
var delta = e.wheelDelta || e.detail || 0;
var box = $(this).get(0);
if($(box).height() + box.scrollTop >= box.scrollHeight){
if(delta < 0) {
preventDefault(e);
return false;
}
}
if(box.scrollTop === 0){
if(delta > 0) {
preventDefault(e);
return false;
}
}
// 会阻止原生滚动
// return false;
}
var disableScroll = function(){
$(document).on('mousewheel', preventDefault);
$(document).on('touchmove', preventDefault);
};
var enableScroll = function(){
$(document).off('mousewheel', preventDefault);
$(document).off('touchmove', preventDefault);
};
// bind
/**$('#closePopup').on('click', function(e){
$('#popupLayer').hide();
$('#bgMask').hide();
enableScroll();
});**/
// 内部可滚
$sideNav.on('mousewheel', innerScroll);
// 外部禁用
disableScroll();
// 移动端touch重写
var startX, startY;
$sideNav.on('touchstart', function(e){
startX = e.changedTouches[0].pageX;
startY = e.changedTouches[0].pageY;
});
// 仿innerScroll方法
$sideNav.on('touchmove', function(e){
e.stopPropagation();
var deltaX = e.changedTouches[0].pageX - startX;
var deltaY = e.changedTouches[0].pageY - startY;
// 只能纵向滚
if(Math.abs(deltaY) < Math.abs(deltaX)){
e.preventDefault();
return false;
}
var box = $(this).get(0);
if($(box).height() + box.scrollTop >= box.scrollHeight){
if(deltaY < 0) {
e.preventDefault();
return false;
}
}
if(box.scrollTop === 0){
if(deltaY > 0) {
e.preventDefault();
return false;
}
}
// 会阻止原生滚动
// return false;
});
$('.nav-btn').on('touchstart', function(event) {
$sideNav.css('pointer-events', 'none');
$mobileWrap.addClass('menu-open');
... ... @@ -57,6 +154,7 @@ function hideSideBar() {
height: 'auto',
overflow: 'auto'
});
enableScroll();
}
}
... ...