修复购物车面板滑动问题。code review by LZF
Showing
1 changed file
with
81 additions
and
24 deletions
@@ -71,44 +71,99 @@ function setEditModeWithSknId(sknId, isThisGoodSelected) { | @@ -71,44 +71,99 @@ function setEditModeWithSknId(sknId, isThisGoodSelected) { | ||
71 | isSelected = isThisGoodSelected; | 71 | isSelected = isThisGoodSelected; |
72 | } | 72 | } |
73 | 73 | ||
74 | -function preventDefault(event) { | ||
75 | - var e = event || window.event; | 74 | +function preventDefault(e) { |
75 | + e = e || window.event; | ||
76 | + e.preventDefault && e.preventDefault(); | ||
77 | + e.returnValue = false; | ||
78 | +} | ||
76 | 79 | ||
77 | - var $target = $(e.target); | 80 | +function stopPropagation(e){ |
81 | + e = e || window.event; | ||
82 | + e.stopPropagation && e.stopPropagation(); | ||
83 | + e.cancelBubble = false; | ||
84 | +} | ||
78 | 85 | ||
79 | - if (($target.hasClass('.chose-items') || $target.closest('chose-items')) && | ||
80 | - ($('.color-list').find('ul').not('.hide').find('li').length > 4 || | ||
81 | - $('.size-list').find('ul').not('.hide').find('li').length > 4)) { | ||
82 | - e.stopPropagation(); | 86 | +function innerScroll(e){ |
87 | + var delta = e.wheelDelta || e.originalEvent.wheelDelta || e.detail || 0, | ||
88 | + box = $(this).get(0); | ||
89 | + | ||
90 | + // 阻止冒泡到document | ||
91 | + // document上已经preventDefault | ||
92 | + stopPropagation(e); | ||
93 | + | ||
94 | + | ||
95 | + if($(box).height() + box.scrollTop >= box.scrollHeight){ | ||
96 | + if(delta < 0) { | ||
97 | + preventDefault(e); | ||
98 | + return false; | ||
99 | + } | ||
100 | + } | ||
101 | + if(box.scrollTop === 0){ | ||
102 | + if(delta > 0) { | ||
103 | + preventDefault(e); | ||
83 | return false; | 104 | return false; |
84 | } | 105 | } |
106 | + } | ||
107 | + // 会阻止原生滚动 | ||
108 | + // return false; | ||
109 | +} | ||
110 | + | ||
111 | +function disableScroll() { | ||
112 | + var startX, startY; | ||
113 | + | ||
114 | + var $choseArea = $('.chose-panel .main .chose-items'); | ||
115 | + | ||
116 | + // 内部可滚 | ||
117 | + $choseArea.on('mousewheel', innerScroll); | ||
118 | + | ||
119 | + // 移动端touch重写 | ||
120 | + $choseArea.on('touchstart', function(e) { | ||
121 | + startX = e.originalEvent.changedTouches[0].pageX; | ||
122 | + startY = e.originalEvent.changedTouches[0].pageY; | ||
123 | + }); | ||
124 | + | ||
125 | + // 仿innerScroll方法 | ||
126 | + $choseArea.on('touchmove', function(e) { | ||
127 | + e.stopPropagation(); | ||
128 | + | ||
129 | + var deltaX = e.originalEvent.changedTouches[0].pageX - startX; | ||
130 | + var deltaY = e.originalEvent.changedTouches[0].pageY - startY; | ||
85 | 131 | ||
86 | - if (e.preventDefault) { | 132 | + // 只能纵向滚 |
133 | + if (Math.abs(deltaY) < Math.abs(deltaX)) { | ||
87 | e.preventDefault(); | 134 | e.preventDefault(); |
135 | + return false; | ||
88 | } | 136 | } |
89 | - e.returnValue = false; | ||
90 | -} | ||
91 | 137 | ||
92 | -function disableScroll(e) { | 138 | + var box = $(this).get(0); |
93 | 139 | ||
94 | - // older FF | ||
95 | - if (window.addEventListener) { | ||
96 | - window.addEventListener('DOMMouseScroll', preventDefault, false); | 140 | + if ($(box).height() + box.scrollTop >= box.scrollHeight) { |
141 | + if (deltaY < 0) { | ||
142 | + e.preventDefault(); | ||
143 | + return false; | ||
144 | + } | ||
145 | + } | ||
146 | + if (box.scrollTop === 0) { | ||
147 | + if (deltaY > 0) { | ||
148 | + e.preventDefault(); | ||
149 | + return false; | ||
150 | + } | ||
97 | } | 151 | } |
152 | + }); | ||
98 | 153 | ||
99 | - window.onwheel = preventDefault; // modern standard | ||
100 | - window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE | ||
101 | - window.ontouchmove = preventDefault; // mobile | 154 | + $(document).on('mousewheel', preventDefault); |
155 | + $(document).on('touchmove', preventDefault); | ||
102 | } | 156 | } |
103 | 157 | ||
104 | function enableScroll() { | 158 | function enableScroll() { |
105 | - if (window.removeEventListener) { | ||
106 | - window.removeEventListener('DOMMouseScroll', preventDefault, false); | ||
107 | - } | ||
108 | - window.onmousewheel = document.onmousewheel = null; | ||
109 | - window.onwheel = null; | ||
110 | - window.ontouchmove = null; | ||
111 | - document.onkeydown = null; | 159 | + var $choseArea = $('.chose-panel .main .chose-items'); |
160 | + | ||
161 | + $choseArea.off('touchstart'); | ||
162 | + $choseArea.off('touchmove'); | ||
163 | + $choseArea.off('mousewheel'); | ||
164 | + | ||
165 | + $(document).off('mousewheel', preventDefault); | ||
166 | + $(document).off('touchmove', preventDefault); | ||
112 | } | 167 | } |
113 | 168 | ||
114 | //删除面板 | 169 | //删除面板 |
@@ -159,10 +214,12 @@ function show(html, cb) { | @@ -159,10 +214,12 @@ function show(html, cb) { | ||
159 | } | 214 | } |
160 | init(); | 215 | init(); |
161 | } | 216 | } |
217 | + | ||
162 | $('.chose-panel').show(); | 218 | $('.chose-panel').show(); |
163 | $num = $('#good-num'); | 219 | $num = $('#good-num'); |
164 | cbFn = cb; | 220 | cbFn = cb; |
165 | 221 | ||
222 | + | ||
166 | disableScroll(); | 223 | disableScroll(); |
167 | } | 224 | } |
168 | 225 |
-
Please register or login to post a comment