js - 移動端的超出滾動功能，附帶滾動條，可解決彈層中滾動穿透問題。
摘要：
背景:
彈層裡邊有可滾動區域時，在移動端的坑我就不多說了。
找了很多解決滾動穿透的方案，最終都不能完美解決。
一氣之下自己js擼了一個。
效果圖：
原理：
1、解決滾動穿透：通過給彈層繫結touchmove和mousewheel事件，取消預設行為實現。
2...
背景:
彈層裡邊有可滾動區域時，在移動端的坑我就不多說了。
找了很多解決滾動穿透的方案，最終都不能完美解決。
一氣之下自己js擼了一個。
效果圖：
原理：
1、解決滾動穿透：通過給彈層繫結touchmove和mousewheel事件，取消預設行為實現。
2、取消預設行為後不能滾動：給需要滾動展示的區域繫結touchstart、touchmove和mousewheel事件，監聽觸發區域的Y值，對應修改可滾動區域的translateY值，實現滾動效果。
缺點/不足：
滑動起來略顯示卡頓，使用者體驗不好，有大佬給提示下怎麼優化嗎？
程式碼：
1 <div class="layer"> 2<div class="layer-box"> 3<h3>title 4<span class="close">X</span> 5</h3> 6<div class="lose-list"> 7<ul class="layer-scroll"> 8<li class="lose-item"> 9<h3>有效降價車款1</h3> 10<ul class="lose-date"> 11<li>10月7日5分</li> 12<li>10月7日6分</li> 13<li>10月7日7分</li> 14<li>10月7日8分</li> 15<li>10月7日9分</li> 16<li>10月7日10分</li> 17<li>10月7日11分</li> 18<li>10月7日12分</li> 19<li>10月7日13分</li> 20<li>10月7日14分</li> 21<li>10月7日15444分</li> 22</ul> 23</li> 24<li class="lose-item"> 25<h3>有效降價車款2</h3> 26<ul class="lose-date"> 27<li>10月7日5分</li> 28<li>10月7日6分</li> 29<li>10月7日7分</li> 30<li>10月7日8分</li> 31<li>10月7日9分</li> 32<li>10月7日10分</li> 33<li>10月7日11分</li> 34<li>10月7日12分</li> 35<li>10月7日13分</li> 36<li>10月7日14分</li> 37<li>10月7日15333分</li> 38</ul> 39</li> 40<li class="lose-item"> 41<h3>有效降價車款3 </h3> 42<ul class="lose-date"> 43<li>10月7日5分</li> 44<li>10月7日6分</li> 45<li>10月7日7分</li> 46<li>10月7日8分</li> 47<li>10月7日9分</li> 48<li>10月7日10分</li> 49<li>10月7日11分</li> 50<li>10月7日12分</li> 51<li>10月7日13分</li> 52<li>10月7日14分</li> 53<li>10月7日152222分</li> 54</ul> 55</li> 56</ul> 57<div class="right-bar"> 58<div class="bar-pro"></div> 59</div> 60</div> 61</div> 62</div>
1 myScroll({
2openBtn: 'button',
3layer: '.layer',
4client: '.lose-list',
5scroll: '.layer-scroll',
6barBG: '.right-bar',
7bar: '.bar-pro'
8});
9function myScroll(params) {
10var utils = {
11clientH: $(params.client).height(), //h1
12scrollH: $(params.scroll).height(), //h2
13barBgH: $(params.barBG).height() //h4
14}
15var lastY = 0,
16transY = 0,
17barTransY = 0,
18barH = 0; //h3
19function noScroll(dom) {
20$(dom).on('mousewheel', function (e) {
21e.preventDefault();
22});
23$(dom).on('touchmove', function (e) {
24e.preventDefault();
25});
26}
27function touchToBottom(target, bar) {
28$(target).on('touchstart', function (e) {
29e.preventDefault();
30let y = e.originalEvent.touches[0].pageY;
31lastY = y;
32});
33$(target).on('touchmove', function (e) {
34e.preventDefault();
35let y = e.originalEvent.touches[0].pageY,
36moveY = y - lastY;
37transY += moveY;
38if (moveY > 0 && transY > 0) {
39/* 滑鼠向下移動，對應元素向上回看 */
40transY = 0; //到頂
41} else {
42/* 滑鼠向上移動，對應元素向下翻看 */
43if (Math.abs(transY) >= e.currentTarget.clientHeight - utils.clientH) { //觸底
44transY = -(e.currentTarget.clientHeight - utils.clientH) + 1;
45}
46}
47$(this).css('transform', `translate(0px, ${transY}px)`);
48/* 移動時，滾輪的變化監聽 */
49var barMove = Math.abs(moveY) * utils.barBgH / utils.scrollH;
50if (moveY > 0) {
51barMove = -barMove;
52}
53barTransY += barMove;
54if (moveY > 0) {
55if (barTransY <= 0) {
56barTransY = 0; //到頂
57}
58} else {
59if (barTransY >= utils.barBgH - barH) {
60barTransY = utils.barBgH - barH; //到底
61}
62}
63$(bar).css('transform', `translate(0px, ${barTransY}px)`);
64lastY = y;
65});
66/* 滾輪事件 */
67$(target).on("mousewheel", function (e, delta) {
68e.preventDefault();
69let y = e.originalEvent.deltaY;
70if (y > 0) {
71/* 向下翻滾輪 wheelDeltaY的值與之相反*/
72transY -= 100;
73barTransY += 100 * utils.barBgH / utils.scrollH;
74if (Math.abs(transY - 100) >= e.currentTarget.clientHeight - utils.clientH) { //觸底
75transY = -(e.currentTarget.clientHeight - utils.clientH) + 1;
76}
77if (barTransY > utils.barBgH - barH) {
78barTransY = utils.barBgH - barH
79}
80} else {
81/* 向上翻滾輪*/
82transY += 100;
83barTransY -= 100 * utils.barBgH / utils.scrollH;
84if (Math.abs(transY) - 100 <= 0) {
85transY = 0; //到頂
86}
87if (barTransY <= 0) {
88barTransY = 0; //到頂
89}
90}
91$(this).css('transform', `translate(0px, ${transY}px)`);
92$(bar).css('transform', `translate(0px, ${barTransY}px)`);
93});
94}
95noScroll(params.layer);
96$(params.layer + ' .close').on('click', function () {
97$(params.layer).fadeOut();
98// $(params.scroll).css('transform', 'translate(0px, 0px)');
99// $(params.bar).css('transform', 'translate(0px, 0px)');
100});
101$(params.openBtn).on('click', function () {
102$(params.scroll).css('transform', 'translate(0px, 0px)');
103$(params.bar).css('transform', 'translate(0px, 0px)');
104lastY = 0;
105transY = 0;
106barTransY = 0;
107$(params.layer).fadeIn();
108utils = {
109clientH: $(params.client).height(), //h1
110scrollH: $(params.scroll).height(), //h2
111barBgH: $(params.barBG).height() //h4
112}
113barH = parseInt(utils.clientH * utils.barBgH / utils.scrollH); //h3
114$(params.bar).height(barH + 'px');
115if (utils.clientH < utils.scrollH) {
116touchToBottom(params.scroll, params.bar);
117}
118});
119}
120
完整demo見github：
ofollow,noindex">移動端超出滾動效果
宣告：
請尊重部落格園原創精神，轉載或使用圖片請註明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/