微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)的實(shí)現(xiàn)代碼(兼容Android和IOS端)
在做微信開發(fā)的時(shí)候遇到這個(gè)問題:微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)。
我覺得這個(gè)問題用的是下面這幾行代碼:
var $body = $('body'),
dialogIsInView = !1,//當(dāng)前是不是對(duì)話框
lastContentContainerScrollTop = -1,//用于彈出框禁止內(nèi)容滾動(dòng)
$contentContainer = $('#content-container');//內(nèi)容容器
//阻止Window滾動(dòng)
function stopWindowScroll() {
dialogIsInView = true;
//禁止頁面滾動(dòng)
lastContentContainerScrollTop = $body.scrollTop();
$contentContainer.addClass('overflow-hidden').css({
'height': $window.height(),
'margin-top': -lastContentContainerScrollTop
});
}
//恢復(fù)Window滾動(dòng)
function revertWindowScroll() {
dialogIsInView = !1;
//恢復(fù)頁面滾動(dòng)
$contentContainer.css({
'height': 'auto',
'margin-top': 0
}).removeClass('overflow-hidden');
$body.scrollTop(lastContentContainerScrollTop);
}
這里有個(gè)要求,內(nèi)容跟元素是 id=”content-Container”.
下面給大家說點(diǎn)題外話:
微信瀏覽器在Android和iOS中的表現(xiàn)形式是不一樣的,歸根結(jié)底是Android端用的QQ瀏覽器內(nèi)核X5,IOS端用的蘋果開放的瀏覽器內(nèi)核webkit。
以上所述是小編給大家介紹的微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)的實(shí)現(xiàn)代碼(兼容Android和IOS端),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- IOS仿今日頭條滑動(dòng)導(dǎo)航欄
- ios scrollview嵌套tableview同向滑動(dòng)的示例
- iOS使用pageViewController實(shí)現(xiàn)多視圖滑動(dòng)切換
- iOS滑動(dòng)解鎖、滑動(dòng)獲取驗(yàn)證碼效果的實(shí)現(xiàn)代碼
- 詳解iOS中position:fixed吸底時(shí)的滑動(dòng)出現(xiàn)抖動(dòng)的解決方案
- 微信小程序在ios下Echarts圖表不能滑動(dòng)的問題解決
- iOS 頁面滑動(dòng)與標(biāo)題切換顏色漸變的聯(lián)動(dòng)效果實(shí)例
- IOS開發(fā)中禁止NavigationController的向右滑動(dòng)返回
- iOS開發(fā)上下滑動(dòng)UIScrollview隱藏或者顯示導(dǎo)航欄的實(shí)例
- iOS實(shí)現(xiàn)無限滑動(dòng)效果
相關(guān)文章
Android TextView實(shí)現(xiàn)詞組高亮的示例代碼
本篇文章主要介紹了Android TextView實(shí)現(xiàn)詞組高亮的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Android自定義View實(shí)現(xiàn)九宮格圖形解鎖(Kotlin版)
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)九宮格圖形解鎖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
Android 6.0 掃描不到 Ble 設(shè)備需開啟位置權(quán)限的方法
今天小編就為大家分享一篇Android 6.0 掃描不到 Ble 設(shè)備需開啟位置權(quán)限的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07
Android編程實(shí)現(xiàn)獲取所有傳感器數(shù)據(jù)的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)獲取所有傳感器數(shù)據(jù)的方法,涉及Android針對(duì)傳感器Sensor相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
React-Native Android 與 IOS App使用一份代碼實(shí)現(xiàn)方法
這篇文章主要介紹了React-Native Android 與 IOS App使用一份代碼實(shí)現(xiàn)方法的相關(guān)資料,這里舉例說明,該如何實(shí)現(xiàn)IOS和Android APP 都使用一樣的代碼,需要的朋友可以參考下2016-12-12
Android實(shí)現(xiàn)延遲的幾種方法小結(jié)
這篇文章主要介紹了Android實(shí)現(xiàn)延遲的幾種方法,結(jié)合實(shí)例總結(jié)了Android實(shí)現(xiàn)延遲的幾種常見技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-02-02
Android ViewPager實(shí)現(xiàn)頁面左右切換效果
這篇文章主要為大家詳細(xì)介紹了Android ViewPager實(shí)現(xiàn)頁面左右切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android視頻播放器屏幕左側(cè)邊隨手指上下滑動(dòng)亮度調(diào)節(jié)功能的原理實(shí)現(xiàn)
這篇文章主要介紹了Android視頻播放器屏幕左側(cè)邊隨手指上下滑動(dòng)亮度調(diào)節(jié)功能的原理實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02

