js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

背景:

弹层里边有可滚动区域时，在移动端的坑我就不多说了。

找了很多解决滚动穿透的方案，最终都不能完美解决。

一气之下自己js撸了一个。

效果图：

原理：

1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。

2、取消默认行为后不能滚动：给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件，监听触发区域的Y值，对应修改可滚动区域的translateY值，实现滚动效果。

缺点/不足：
滑动起来略显卡顿，用户体验不好，有大佬给提示下怎么优化吗？

代码：

 <div class="layer">
     <div class="layer-box">
       <h3>title
         <span class="close">X</span>
       </h3>
       <div class="lose-list">
         <ul class="layer-scroll">
           <li class="lose-item">
             <h3>有效降价车款1</h3>
             <ul class="lose-date">
               <li>10月7日5分</li>
               <li>10月7日6分</li>
               <li>10月7日7分</li>
               <li>10月7日8分</li>
               <li>10月7日9分</li>
               <li>10月7日10分</li>
               <li>10月7日11分</li>
               <li>10月7日12分</li>
               <li>10月7日13分</li>
               <li>10月7日14分</li>
               <li>10月7日15444分</li>
             </ul>
           </li>
           <li class="lose-item">
             <h3>有效降价车款2</h3>
             <ul class="lose-date">
               <li>10月7日5分</li>
               <li>10月7日6分</li>
               <li>10月7日7分</li>
               <li>10月7日8分</li>
               <li>10月7日9分</li>
               <li>10月7日10分</li>
               <li>10月7日11分</li>
               <li>10月7日12分</li>
               <li>10月7日13分</li>
               <li>10月7日14分</li>
               <li>10月7日15333分</li>
             </ul>
           </li>
           <li class="lose-item">
             <h3>有效降价车款3 </h3>
             <ul class="lose-date">
               <li>10月7日5分</li>
               <li>10月7日6分</li>
               <li>10月7日7分</li>
               <li>10月7日8分</li>
               <li>10月7日9分</li>
               <li>10月7日10分</li>
               <li>10月7日11分</li>
               <li>10月7日12分</li>
               <li>10月7日13分</li>
               <li>10月7日14分</li>
               <li>10月7日152222分</li>
             </ul>
           </li>
         </ul>
         <div class="right-bar">
           <div class="bar-pro"></div>
         </div>
       </div>
     </div>
   </div>

 myScroll({
       openBtn: 'button',
       layer: '.layer',
       client: '.lose-list',
       scroll: '.layer-scroll',
       barBG: '.right-bar',
       bar: '.bar-pro'
     });
     function myScroll(params) {
       var utils = {
         clientH: $(params.client).height(), //h1
         scrollH: $(params.scroll).height(), //h2
         barBgH: $(params.barBG).height() //h4
       }
       var lastY = 0,
         transY = 0,
         barTransY = 0,
         barH = 0; //h3
       function noScroll(dom) {
         $(dom).on('mousewheel', function (e) {
           e.preventDefault();
         });
         $(dom).on('touchmove', function (e) {
           e.preventDefault();
         });
       }
       function touchToBottom(target, bar) {
         $(target).on('touchstart', function (e) {
           e.preventDefault();
           let y = e.originalEvent.touches[0].pageY;
           lastY = y;
         });
         $(target).on('touchmove', function (e) {
           e.preventDefault();
           let y = e.originalEvent.touches[0].pageY,
             moveY = y - lastY;
           transY += moveY;
           if (moveY > 0 && transY > 0) {
             /* 鼠标向下移动，对应元素向上回看 */
             transY = 0; //到顶
           } else {
             /* 鼠标向上移动，对应元素向下翻看 */
             if (Math.abs(transY) >= e.currentTarget.clientHeight - utils.clientH) { //触底
               transY = -(e.currentTarget.clientHeight - utils.clientH) + 1;
             }
           }
           $(this).css('transform', `translate(0px, ${transY}px)`);
           /* 移动时，滚轮的变化监听 */
           var barMove = Math.abs(moveY) * utils.barBgH / utils.scrollH;
           if (moveY > 0) {
             barMove = -barMove;
           }
           barTransY += barMove;
           if (moveY > 0) {
             if (barTransY <= 0) {
               barTransY = 0; //到顶
             }
           } else {
             if (barTransY >= utils.barBgH - barH) {
               barTransY = utils.barBgH - barH; //到底
             }
           }
           $(bar).css('transform', `translate(0px, ${barTransY}px)`);
           lastY = y;
         });
         /* 滚轮事件 */
         $(target).on("mousewheel", function (e, delta) {
           e.preventDefault();
           let y = e.originalEvent.deltaY;
           if (y > 0) {
             /* 向下翻滚轮 wheelDeltaY的值与之相反*/
             transY -= 100;
             barTransY += 100 * utils.barBgH / utils.scrollH;
             if (Math.abs(transY - 100) >= e.currentTarget.clientHeight - utils.clientH) { //触底
               transY = -(e.currentTarget.clientHeight - utils.clientH) + 1;
             }
             if (barTransY > utils.barBgH - barH) {
               barTransY = utils.barBgH - barH
             }
           } else {
             /* 向上翻滚轮*/
             transY += 100;
             barTransY -= 100 * utils.barBgH / utils.scrollH;
             if (Math.abs(transY) - 100 <= 0) {
               transY = 0; //到顶
             }
             if (barTransY <= 0) {
               barTransY = 0; //到顶
             }
           }
           $(this).css('transform', `translate(0px, ${transY}px)`);
           $(bar).css('transform', `translate(0px, ${barTransY}px)`);
         });
       }
       noScroll(params.layer);
       $(params.layer + ' .close').on('click', function () {
         $(params.layer).fadeOut();
         // $(params.scroll).css('transform', 'translate(0px, 0px)');
         // $(params.bar).css('transform', 'translate(0px, 0px)');
       });
       $(params.openBtn).on('click', function () {
         $(params.scroll).css('transform', 'translate(0px, 0px)');
         $(params.bar).css('transform', 'translate(0px, 0px)');
         lastY = 0;
         transY = 0;
         barTransY = 0;
         $(params.layer).fadeIn();
         utils = {
           clientH: $(params.client).height(), //h1
           scrollH: $(params.scroll).height(), //h2
           barBgH: $(params.barBG).height() //h4
         }
         barH = parseInt(utils.clientH * utils.barBgH / utils.scrollH); //h3
         $(params.bar).height(barH + 'px');
         if (utils.clientH < utils.scrollH) {
           touchToBottom(params.scroll, params.bar);
         }
       });
     }
     

完整demo见github：

移动端超出滚动效果

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/