作者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/m.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