首页 > 代码库 > 工作总结
工作总结
1、手机端做了个 一屏屏滚动 的页面。但是设计给的图太长 下面挡住了看不到下面。就自己写了一个模仿swiper的,在其他浏览器没事,但是在QQ浏览器 下拉时 QQ浏览器自带的下拉框出现(已启用QQ浏览器X5内核),没法下拉去上一页。
解决:在html标签上添加 class=“noscroll”
css:
.noscroll,
.noscroll body {
overflow: hidden;
}
.noscroll body {
position: relative;
}
js:
$(function(){ function smartScroll(container, selectorScrollable){ // 如果没有滚动容器选择器,或者已经绑定了滚动时间,忽略 if (!selectorScrollable || container.data(‘isBindScroll‘)) { return; } // 是否是搓浏览器 // 自己在这里添加判断和筛选 var isSBBrowser; var data =http://www.mamicode.com/ { posY: 0, maxscroll: 0 }; // 事件处理 container.on({ touchstart: function (event) { var events = event.touches[0] || event; // 先求得是不是滚动元素或者滚动元素的子元素 var elTarget = $(event.target); if (!elTarget.length) { return; } var elScroll; // 获取标记的滚动元素,自身或子元素皆可 if (elTarget.is(selectorScrollable)) { elScroll = elTarget; } else if ((elScroll = elTarget.parents(selectorScrollable)).length == 0) { elScroll = null; } if (!elScroll) { return; } // 当前滚动元素标记 data.elScroll = elScroll; // 垂直位置标记 data.posY = events.pageY; data.scrollY = elScroll.scrollTop(); // 是否可以滚动 data.maxscroll = elScroll[0].scrollHeight - elScroll[0].clientHeight; }, touchmove: function () { // 如果不足于滚动,则禁止触发整个窗体元素的滚动 if (data.maxscroll <= 0 || isSBBrowser) { // 禁止滚动 event.preventDefault(); } // 滚动元素 var elScroll = data.elScroll; // 当前的滚动高度 var scrollTop = elScroll.scrollTop(); // 现在移动的垂直位置,用来判断是往上移动还是往下 var events = event.touches[0] || event; // 移动距离 var distanceY = events.pageY - data.posY; if (isSBBrowser) { elScroll.scrollTop(data.scrollY - distanceY); elScroll.trigger(‘scroll‘); return; } // 上下边缘检测 if (distanceY > 0 && scrollTop == 0) { // 往上滑,并且到头 // 禁止滚动的默认行为 event.preventDefault(); return; } // 下边缘检测 if (distanceY < 0 && (scrollTop + 1 >= data.maxscroll)) { // 往下滑,并且到头 // 禁止滚动的默认行为 event.preventDefault(); return; } }, touchend: function () { data.maxscroll = 0; } }); // 防止多次重复绑定 container.data(‘isBindScroll‘, true); }; // 父,滑动的外层 var nianduzhangdan=$(‘#nianduzhangdan‘); smartScroll(nianduzhangdan, ‘.inner‘); })
这样就禁止了QQ自带的下拉框
2、JQ的2方法 .is()返回true、false 判断事件的对象是不是括号里的对象;parents() 判断事件的对象是不是括号里的对象的子;
3、$(event.target) 获取当前事件的元素
工作总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。