2. 程式人生 > >移動端左右滑動阻止觸發上一頁下一頁操作

移動端左右滑動阻止觸發上一頁下一頁操作

阿新 • • 發佈：2019-02-16

最近有個需求，就是非常簡單地橫向滑動。打算使用overflow-x:auto;來試驗原生滑動，但在安卓版UC下當滑到最左或者最右會

1
 
預設啟用UC上一頁、下一頁手勢
，導致頁面的跳轉（原生瀏覽器無此手勢）。之前好幾個專案之前視訊有使用js處理(query: 夏洛特煩惱), 橫向滑動沒有加慣性支援，非常卡頓。感覺此類對距離沒有要求的滑動用原生最好，而且overflow-x:auto;相容性支援到安卓2.1以上，使用起來也非常方便，所以打算在UC下做一下適配。

使用css佈局

先使用overflow-x:auto;給UL加上一下css，做出橫向滑動的效果：

1
2
3
 
overflow-x
 
: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;

這樣，一個簡單地滾動效果就實現了。如圖

css滑動

在UC瀏覽器安卓版下試驗，不出所料的滑到最右邊啟用了UC上一頁、下一頁手勢。

解決思路

經過無數次和@紹偉的試驗，給

1
 
body
繫結 
1
 
touchmove
事件，並且組織預設行為就能把UC效果乾掉，那麼就有思路了：
  1. 在滑到最左邊或者最右邊給Body繫結事件，組織預設行為
  2. 當手指擡起解綁事件

參考程式碼

具體參考程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
var preventUCDefault = (function() {
    var ua = window.navigator.userAgent,
        startX = 0,
        diffY = 0,
        bindPreventTouch = function() {
            $(document.body).on('touchmove.prevUC', function(e) {
                e.preventDefault();
            });
        },
        isAndroid
 
 = (function() {
            //https://github.com/amfe/lib-env/blob/master/src/browser.js#L70
            return (!!ua.match(/(?:UCWEB|UCBrowser\/)([\d\.]+)/) && !!ua.match(/Android[\s\/]([\d\.]+)/));
        })();

    return {
        init : function(ul) {
            if(isAndroid) {
                var scrollWidth = ul[0].scrollWidth;

                ul.on('touchstart.prevUC', function(e) {
                    startX = e.touches[0].pageX;
                });

                ul.on('touchmove.prevUC',function(e) {
                    diffY = e.touches[0].pageX - startX;
                    if($(this).scrollLeft() == 0 && diffY > 0) {
                        //到最左
                        bindPreventTouch();
                    }else if((scrollWidth - $(this).scrollLeft() - ul.width())  === 0 && diffY < 0) {
                        //到最右
                        bindPreventTouch();
                    }
                });

                ul.on('touchend.prevUC',function(e) {
                    $(document.body).off('touchmove.prevUC');
                });
            }
        }
    }
})();


preventUCDefault.init(scope.find('.slide-image ul'));

經過QA測試，低版本UC下滑動效果也很不錯呢！

優化

當然，想開啟gpu加速可以加上下句話：

1
 
-webkit-transform:translateZ(0);

另外，使用原生滑動會出現滾動條，如果想達到極致體驗的話，@靳磊給了兩個思路：

  1. 外面套一層，給定高度+overflow:hidden;
  2. 加一個偽元素將滾動條遮起來

使用偽元素程式碼如下

1
2
3
4
5
6
7
8
9
10
 
 ul::after {
    display: block;
    content: "";
    position: absolute;
    z-index: 10;
    width: 100%;
    background-color: #fff;
    height: 10px;
    margin-top : -11px;
}

總結

對於一個問題一個人思考思維會很侷限，和大家一起討論完成學到了很多解決的辦法，能將任務完成最優而且增進團隊的融合性。

更新 2015年12月14日

隱藏滾動條還有更好地方法

1
2
3
 
ul::-webkit-scrollbar {
        display: none;
    }

主要解決背景非純色而是虛化這樣的需求，uc下有效，但是safari下還是會出現滾動條，有點小遺憾。

相關推薦

移動端左右滑動阻止觸發上一頁下一頁操作

最近有個需求，就是非常簡單地橫向滑動。打算使用overflow-x:auto;來試驗原生滑動，但在安卓版UC下當滑到最左或者最右會 1 預設啟用UC上一頁、下一頁手勢 ，導致頁面的跳轉（原生瀏覽器無此手勢）。之前好幾個專案之前視訊有使用js處理(query: 夏洛

js移動端左右滑動事件

edt efault nbsp ret rip chm width idt touchend 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>

【原創】實現一個簡單的移動端左右滑動翻頁+ 點選下標翻頁 利用：HTML5+CSS+Js

//【如何做一個簡單的手機端頁面的翻頁】//第一步：建立移動端頁面內  HTML + CSS  【注】可用彈性佈局   但需要注意的是  外層盒子的定位//第二步： 思考問題  要實現怎樣的效果？//1. 手指滑動時觸發事件【左右】兩個方向  //2.點選footer部分的下

js案例 移動端左右滑動touch+transform

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport"

筆記-移動端滑動到底部自動加載下一頁內容

移動端 esc inf 技術分享 公司 detail r+ truct get 公司微信公眾號的網頁由ThinkPHP框架的模板生成，由一個需求是滑動到底部時自動加載下一頁內容。 1、網頁結構 網頁分為兩個部分，頂部固定導航欄，下部有一個page容器，內部滾動顯示。 2、

Android ViewPager實現上一頁下一頁左右滑動的正確方法

回顧一下這個功能的應用場景：有一個裝有很多條資料的一個list,這個list在listView中顯示出來了，現在滑動listView隨便到一個位置，點選一個item進入資料的詳情頁，在這個詳情頁，我們用到了viewPager,讓它實現左右滑動的效果。 以前我也是在網上找

jquery touch 移動端上下滑動加載

hang blog change ldl scrollto jquery scroll edt end var touchStart, touchEnd, touchDiff = 80; $(window).on({ ‘touchs

移動端彈性滑動以及vue記錄滑動位置

我們 移除 顯示 lis 滑動 手指 oca 方式 -i -webkit-overflow-scrolling介紹 -webkit-overflow-scrolling: auto | touch; auto： 普通滾動，當手指從觸摸屏上移開，滾動立即停止 touch：滾動

移動端tab滑動和上下拉刷新加載

ldo swiper 手勢 lock red height direction 不清楚 log 移動端tab滑動和上下拉刷新加載 查看demo（請在移動端模式下查看） 查看代碼 開發該插件的初衷是，在做一個項目時發現現在實現移動端tab滑動的插件大多基於swiper，sw

用css巧妙實現移動端橫向滑動展示功能

公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。 <!DOCTYPE html> <html> <head> <ti

沐風：搶佔移動端流量入口的標配：兩微一抖！

截止2017年，中國手機使用者已達到11億，也就是說未來網際網路的主戰場不在PC，而是在移動裝置上，我們已經進入了移動網際網路時代。 在上一篇日記中我分享到企業網路營銷戰略設計，其中第一步就是流量。對於網路營銷沒有流量入口就像生活中沒有水源一樣。當前最重要的，移動網際網路流量入口便是：兩微一

原生JavaScript實現監聽移動端上下左右滑動事件

/** * @author W.Dong * @date 2018/10/26 * @Description: 監聽觸控的方向 */ var EventUtil = { addHandler: function (element, type, handler) { if

js input連續輸入回退連續刪除 js input模仿移動端連續輸入回退連續刪除 全網只有一份

確實是全網找不到的例子，也確實是吹牛逼公司前端寫了一點，但是存在ug當輸入完四個，回退刪了兩個，獲取的只剩下兩個，我又天天補補了一下, 直接上程式碼吧 <!DOCTYPE html> <html> <head> <meta chars

移動端頁面滑動時候警告：Unable to preventDefault inside passive event listener due to target being treated as passive.

ted doc com cti 滾動 href 解決 docs css 移動端項目中，在滾動的時候，會報出以下提示： [Intervention] Unable to preventDefault inside passive event listener due to t

呼叫移動端“搜尋”按鍵，觸發後收起軟鍵盤

 將input元素的type值替換成“search”,在移動端會喚出“搜尋”按鍵。需注意的是，對於蘋果手機input元素必須要有一個form標籤套起來，否則鍵盤上的文字不能變成搜尋字樣 <form id="myform" action="#" onsubmit="return f

iScroll左右滑動阻止內容上下滑動 e.preventDefault() 解決辦法

最近寫了一個下拉載入（新聞列表頁面和詳情頁面在同一個頁面）這個事件真的讓我除錯了很久，才找到了原因 問題:頁面下拉不了 window.addEventListener('touchmove', function (e) { e.preventDefault(); }, f

移動端頁面滑動事件穿透問題及其解決方案

滑動事件穿透： 在一個可滾動的列表頁中開啟彈窗，底部的頁面理論上是不可滾動的，但是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。 解決方案一： 當彈窗顯示時，在父元素上新增fix類來禁用滾動；當彈窗隱藏時，移除fix類。 .fix{

移動端上下滑動swiper,第二個頁面內容大於螢幕尺寸，現在的問題是，超出部分無法通過滾動條下滑檢視。

（如果禁用swiper某個方向的移動，會導致無法滑動到上一頁） <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport"

解決移動端頁面滑動穿透問題

 前幾天遇到移動端頁面穿透問題相信很多人也遇到過相應的情況    這個問題特別頑固  電腦端用谷歌移動介面測試沒有問題 但是安卓 ios 還是會有問題  而且安卓 和 ios 下面兩種放法  支援還不一樣導致這個問題弄了很久     內容有點多請詳細閱讀！！！！ 就像這個

vue.js移動端app實戰4：上拉載入以及下拉重新整理

上拉載入以及下拉重新整理都是移動端很常見的功能，在搜尋或者一些分類列表頁面常常會用到。http://www.tuicool.com/articles/Vfmu6rR 跟橫向滾動一樣，我們還是採用better-scroll這個庫來實現。由於better已經更新了新的版