我有这个jquery来防止在浏览器和手持设备上滚动:
$(document).ready(function() {
$('div.overlay').click(function() {
$('html').css('overflow', 'hidden');
$('body').bind('touchmove', function(e) {
e.preventDefault()
});
});
$('.overlay-close').click(function() {
$('html').css('overflow', 'scroll');
$('body').unbind('touchmove');
});
});
但是我已经更新了javascript,现在snipp还没有工作......
这是javascript
(function() {
var triggerButtons = document.getElementsByClassName('trigger-overlay'),
overlay = document.querySelectorAll('div.overlay');
var closeButtons = [];
for (var i = 0; i < overlay.length; i++) {
var closeBttn = overlay[i].querySelector('button.overlay-close');
closeButtons.push(closeBttn);
}
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
support = {
transitions: Modernizr.csstransitions
};
function toggleOverlay(overlay) {
if (classie.has(overlay, 'open')) {
classie.remove(overlay, 'open');
classie.add(overlay, 'close');
var onEndTransitionFn = function(ev) {
if (support.transitions) {
if (ev.propertyName !== 'visibility') return;
this.removeEventListener(transEndEventName, onEndTransitionFn);
}
classie.remove(overlay, 'close');
};
if (support.transitions) {
overlay.addEventListener(transEndEventName, onEndTransitionFn);
} else {
onEndTransitionFn();
}
} else {
classie.add(overlay, 'open');
classie.remove(overlay, 'close');
}
}
for (var i = 0; i < triggerButtons.length; i++) {
triggerButtons[i].addEventListener('click', (function(i) {
return function() {
toggleOverlay(overlay[i])
};
})(i));
}
for (var i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', (function(i) {
return function() {
toggleOverlay(overlay[i])
};
})(i));
}
})();
当我在弹出的叠加层中单击(随机)时,似乎无滚动代码启动,然后当我按closeBttn
时未启用它。
预期结果:
显示叠加时(按下triggerbutten
时)禁用滚动。然后在叠加层关闭时启用滚动。