作者cockroach727 (小强)
看板Web_Design
标题[问题] jQuery滚轮动画与modal冲突
时间Thu Feb 5 00:43:30 2015
大家好 小弟正在自学做one page website
日前找到一段颇小巧的js
可以实作出 滑鼠滚轮触发 卷动至上/下一个section的换页动画 效果顺利
但我原本有个scroll bar的modal就因此废了
modal弹出时 滚轮会卷背景 modal里的内容却不会动
看起来像是mousewheel冲突到
有没有办法限制说 当modal弹出时disable掉这个滚轮换页动画(保持背景不动)
让里面的scroll bar正常运作
而关掉modal时再enable它
我用$('.modal').on('shown.bs.modal',function(e){})
写了几种判断条件去wrap都没用
请板上高手指点 感恩
附上这个动画的原始码:
$(document).ready(function(){
var delay = false;
$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
if(delay) return;
delay = true;
setTimeout(function(){delay = false},200)
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a= document.getElementsByTagName('section');
if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}}
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}}
$('html, body').stop().animate({
scrollTop: $(a[i]).offset().top
}, 800, 'easeInOutExpo');
});
});
--
Sent from my smoke signals
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 219.70.211.131
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1423068217.A.E08.html
1F：推 iamnodoubt: 好像大部份都是用下一篇讲的那样控制,js也可以取消事 02/05 10:58
感谢楼上与下一篇回文中的高手们 <(_ _ )>
总之error&try好久後 用off掉滚轮事件来解除modal出现时的背景卷动
搭配回文提到的另做一段伫列callback的方法解决
附上改後的code:
$(document).ready(function (){
WheelPageScrolling();
//--卷动动画核心function--//
$('.modal')
.on('shown.bs.modal',function(){ $(document).off('mousewheel
DOMMouseScroll'); })
//--当modal出现时off掉滚轮--//
.on('hidden.bs.modal',function(){ WheelPageScrolling(); });
//--当modal隐藏时再callback,
这里无法省略function(),原因再研究--//
});
function WheelPageScrolling(){... ...};
//核心另放//
※ 编辑: cockroach727 (219.70.211.131), 02/07/2015 01:41:09