快捷導(dǎo)航

微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)的實(shí)現(xiàn)代碼（兼容Android和IOS端）

更新時(shí)間：2016年11月24日 17:04:12 作者：SennTyou

小編在做微信開發(fā)的時(shí)候遇到微信瀏覽器彈出框滑動(dòng)時(shí)頁面跟著滑動(dòng)的效果，下面把關(guān)鍵代碼分享給大家，需要的朋友參考下

在做微信開發(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)站的支持！

您可能感興趣的文章:

相關(guān)文章

Android PopUpWindow使用詳解
PopupWindow與AlertDialog最關(guān)鍵的區(qū)別是AlertDialog不能指定顯示位置，只能默認(rèn)顯示在屏幕最中間（當(dāng)然也可以通過設(shè)置WindowManager參數(shù)來改變位置）。而PopupWindow是可以指定顯示位置的，隨便哪個(gè)位置都可以，更加靈活
2021-10-10
Android仿新浪微博、QQ空間等帖子顯示(1)
這篇文章主要為大家詳細(xì)介紹了Android仿新浪微博、QQ空間等帖子顯示,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Android序列化實(shí)現(xiàn)接口Serializable與Parcelable詳解
我們使用 Intent 傳遞數(shù)據(jù)的時(shí)候，putExtra() 所支持的數(shù)據(jù)類型事有限的，當(dāng)需要傳遞自定義對(duì)象的時(shí)候就需要序列化。Serializable更簡單但是會(huì)把整個(gè)對(duì)象進(jìn)行序列化因此效率比Parcelable低一些
2022-12-12
Android ViewPager2 使用及自定義指示器視圖實(shí)現(xiàn)
這篇文章主要為大家介紹了Android ViewPager2 使用及自定義指示器視圖實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Android應(yīng)用啟動(dòng)另外一個(gè)apk應(yīng)用的方法
這篇文章主要介紹了Android應(yīng)用啟動(dòng)另外一個(gè)apk應(yīng)用的方法,涉及Android基于intent的package調(diào)用與管理技巧,需要的朋友可以參考下
2016-02-02
Android編程實(shí)現(xiàn)TCP客戶端的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)TCP客戶端的方法,結(jié)合實(shí)例形式分析了Android實(shí)現(xiàn)TCP客戶端的原理及數(shù)據(jù)通信的相關(guān)技巧,需要的朋友可以參考下
2016-04-04
Kotlin如何安全訪問lateinit變量的實(shí)現(xiàn)
這篇文章主要介紹了Kotlin如何安全訪問lateinit變量的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
Android的Service應(yīng)用程序組件基本編寫方法
Service是一個(gè)android 系統(tǒng)中的應(yīng)用程序組件，它跟Activity的級(jí)別差不多，但是他沒有圖形化界面，不能自己運(yùn)行，只能后臺(tái)運(yùn)行,Service通常用來處理一些耗時(shí)比較長的操作
2012-12-12
Android RecyclerView 數(shù)據(jù)綁定實(shí)例代碼
本文主要介紹Android RecyclerView 數(shù)據(jù)綁定的資料，這里詳細(xì)說明如何實(shí)現(xiàn) Android RecyclerView的數(shù)據(jù)綁定,并附示例代碼，有需要的小伙伴可以參考下
2016-09-09
Android實(shí)現(xiàn)閃屏歡迎界面
這篇文章主要介紹了Android實(shí)現(xiàn)閃屏歡迎界面的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02