JQuery在PC端實現手機觸屏垂直滑動效果

2021-07-23 15:17:40 字數 815 閱讀 6921

經常會遇到下拉框過長出現垂直滾動條的情況,有時候這個長度還是由使用者來增加的。

比如:有乙個評價選單,單擊它會出現乙個浮層,這個浮層列出了很多評語,這些評語都是使用者自己增加的,該帳號下的所有的使用者增加的評價都會顯示出來。很快這個浮層的長度就超過了視窗的長度,那就會出現滾動條,然後樣式就醜爆了。

浮層的寬度本身就不寬,也就滾動條寬度的3-5倍,再就是滾動條的樣式每個瀏覽器都不同。ie的滾動條只可以調整顏色,chrome的滾動條顏色大小都可以改,firfox的滾動條就直接沒法改的。

個人覺得移動端的滑動效果挺方便實用的,於是想在pc端實現這個效果。水平滑動效果的**網上其實已經有了,垂直滑動的我倒是沒找著,所以自己整了乙個。

html**:

jquery**一:滑鼠單擊然後上滑下滑
$(document).ready(function () );

document.onmousemove = function (e) }};

document.onmouseup = function (e) ;

});

jquery**二:滑鼠滾輪滑動時實現上滑下滑
document.body.onmousewheel = function(e) 

if(oldmargin >= -750 && oldmargin <= 0)

}//下滑

if(e.wheeldelta == -120)

if(oldmargin >= -750 && oldmargin <= 0)}};

PC端適配手機端(響應式JS)

function win win.addeventlistener resize function false win.addeventlistener pageshow function e false refreshrem else win.addeventlistener resize fun...

PC端手機端自適應方案總結

pc端手機端自適應方案 一 做成兩個站,兩個網域名稱 方法 後端判斷裝置切換,跳轉鏈結 前端js判斷裝置切換,跳轉鏈結 缺點 1.兩個網域名稱,不利於seo優化 2.兩個站,量大,布局專案繁雜 優點 1.邏輯清晰,簡潔 適用場景 pc端和手機端設計圖差別較大時 二 做成乙個站,乙個網域名稱 方法 用...

TP5中手機端和PC端的實現方式

function ismobile 協議法,因為有可能不準確,放到最後判斷 載入模板輸出 電腦和手機 accessprotected paramstring template模板檔名 paramstring mobiletemplate手機模板檔名 paramarray vars模板輸出變數 par...