uniapp微信小程序與H5的彈窗滾動穿透解決方法
更新時(shí)間：2023年01月31日 10:03:43 作者：坐等夕陽落time
在uni-app中彈窗的用途很常見,比如商品規(guī)格選取、廣告彈窗等,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序與H5的彈窗滾動穿透解決方法,需要的朋友可以參考下
滾動穿透：
頁面里的彈窗也是可以滾動的，然后頁面本身內(nèi)容多所以也是滾動的，就造成，在彈窗滾動的時(shí)候，頁面內(nèi)容也跟著滾動了。如圖所示
ps: 電腦端分鼠標(biāo)滾輪滾動和長按鼠標(biāo)拖拽滾動，手機(jī)端只有觸屏滑屏滾動，即像電腦端的長按鼠標(biāo)拖拽滾動
我是在電腦上錄屏的，所以兩種情況的滾動穿透我都錄上去
鼠標(biāo)滾輪滾動的穿透
長按鼠標(biāo)拖拽滾動的穿透
解決滾動穿透：
前提： 我用了UViewUi1.0版本的彈窗組件
Popup 彈出層 | uView - 多平臺快速開發(fā)的UI框架 - uni-app UI框架
然后我的場景是內(nèi)容局部滾動，UView提供的內(nèi)容局部滾動方案如下：
所以結(jié)構(gòu)是這樣的
<u-popup mode="bottom" v-model="show">
<view class="content">
<scroll-view scroll-y="true" style="height: 500rpx;">
<view>
局部內(nèi)容局部內(nèi)容
</view>
</scroll-view>
<view class="confrim-btn">
<u-button @click="show = false;">確定</u-button>
</view>
</view>
</u-popup>1 解決電腦端長按鼠標(biāo)拖拽滾動，即手機(jī)端的觸屏滑屏滾動穿透問題（主要） 電腦端
重要代碼：
@touchmove.stop.prevent="() => {}"這句代碼加在scroll-view上
手機(jī)端
重要代碼（我找了好久才找到這個(gè)屬性的）：
overscroll-behavior-y: contain !important;附：overscroll-behavior: contain阻止?jié)L動鏈接，滾動不會傳播給祖先
當(dāng)用戶滾動嵌入的網(wǎng)頁（或網(wǎng)頁上的任何嵌套滾動容器）并到達(dá)末尾時(shí)，瀏覽器將開始滾動外部頁面。這被稱為滾動鏈。
滾動鏈?zhǔn)侵笣L動從一個(gè)滾動容器傳播到滾動鏈后面的祖先滾動容器。
一些用戶可能會覺得這種行為很煩人。幸運(yùn)的是，可以通過將
overscroll behavior: contain應(yīng)用于嵌入頁面（或滾動容器）的<body>元素來禁用滾動鏈接。。body { overscroll-behavior: contain; }Firefox、Chromium 和 Edge 通過 AutoRefixer 支持此功能，但 Safari 目前還不支持此功能：
滾動動畫
sroll-behavior: smooth。
完整學(xué)習(xí)看這個(gè)：
overscroll-behavior - CSS（層疊樣式表） | MDN
這句代碼是css的，因?yàn)橛昧薝View的組件，所以這個(gè)要阻斷滾輪鏈，就得要阻斷真的滾動區(qū)域（最頂上的父級），直接加在我們的局部滾動scroll-view上是無效的，要加在最頂上的父級滾動區(qū)，這個(gè)需要你開調(diào)試者工具找，因?yàn)槟憧赡苡脛e的組件，多包了幾層。
想改變深層元素的深層樣式，代碼如下
ps:
1、因?yàn)槭歉淖兞松顚釉氐臉邮?，所以要手動刷新一下，不要熱刷新，會沒效果哈。
2、uniapp的插件引入，支持自己直接改源碼的，所以，你可以直接去UView的彈窗文件里修改，就不用加 /deep/了。
2 解決電腦端的鼠標(biāo)滾輪滾動穿透
其實(shí)是因?yàn)閺棿昂蛷棿暗恼谡謱樱幱皩樱]有阻止電腦端的鼠標(biāo)滾輪滾動的操作，所以就導(dǎo)致了還存在鼠標(biāo)滾輪滾動穿透。
這是是用了UView的組件的問題，所以直接去源碼里改
重要代碼
@mousewheel.prevent
遮罩層 u-mask:
彈窗 u-popup :
直接在這加，那彈窗的所有地方都不能鼠標(biāo)滾動了，包括你自己的scrollview區(qū)域。
u-popup 的禁止?jié)L輪滾動這個(gè)可以不弄，因?yàn)闈L輪滾動挺方便的，想保留自己的scrollview區(qū)域的鼠標(biāo)滾動，就要在非scrollview的地方加阻斷滾輪事件的操作。而且只要加了下面的代碼的，在你的局部滾動處（scrollview)滾輪滾動的穿透基本無了。
overscroll-behavior-y: contain !important;
我的完整效果代碼(uview源碼修改的就不貼了）
彈窗
<!-- @touchmove.stop.prevent 在u-popup已經(jīng)設(shè)置了，所以觸摸的滾動是阻斷的，電腦鼠標(biāo)滾輪滾動沒阻斷而已 -->
<u-popup v-model="popupShow" mode="bottom" border-radius="24" @close="onPopupClose" duration="200">
<view class="popup-view" v-if="popupShow">
<block v-if="popuptype == 'pay'">
<view class="x space-between popup-view-title lightgrayborder">
<view class="main-title">
跟團(tuán)購買
</view>
<u-icon name="close" color="#999999" size="28" @tap="onPopupClose"></u-icon>
</view>
<!-- @touchmove.stop.prevent="() => {}" 寫在 scroll-view 里是為了兼容電腦端，阻斷上下拖拽動作 ，手機(jī)端 使用 overscroll-behavior-y: contain !important;就足夠阻斷滾動穿透了，@mousewheel.prevent阻止電腦端滾輪滾動穿透-->
<scroll-view scroll-y="true" style="height: 500rpx;"
@touchmove.stop.prevent="() => {}">
<view class="x align-center popup-view-address">
<u-icon name="map" color="#FF384B" size="36"></u-icon>
<view class="y space-between mar-left">
<view class="x">
<view class="boldfont">收貨名字</view>
<view class="mar-left">
175891509xx
</view>
</view>
<view class="spu-name" style="margin-top: 6rpx;">
收貨收貨收貨地址地址地址地址地址地址地址
</view>
</view>
</view>
<view class="x bgwhite lightgrayborder">
<u-image width="228rpx" height="228rpx"
src="https://img12.360buyimg.com/n1/jfs/t1/216488/12/17456/103503/6275c6ddE0b23753c/7387ff8f9b3e5ee3.jpg"
class="flex-shrink0" border-radius="10">
</u-image>
<view class="y space-between mar-left ">
<view class="spu-name boldfont">
BEAUTY-FACTOR/美麗因子化妝刷套刷黑金8支套刷腮紅刷眼影刷斜形眼線刷唇刷 黑金8支套刷
</view>
<view class="lightgrayfont">
200ml
</view>
<view class="spu-price space-between">
<view class="spu-price">
<view class="price-etr">￥</view>398
</view>
<u-number-box v-model="buyCountNum" :min="numberBoxMin" :max="numberBoxMax"
size="24" input-height="44"></u-number-box>
</view>
</view>
</view>
<view class="popup-view-actual-pay">
<view class="x space-between align-center">
<view class="">
商品總價(jià)
</view>
<view class="boldfont">
￥398
</view>
</view>
<view class="x align-center flex-end " style="margin-top: 10rpx;">
<view class="mar-right">
共1件
</view>
實(shí)際支付
<view class="spu-price" style="padding-bottom: 2rpx;">
￥398
</view>
</view>
</view>
<view class="bgwhite x align-center">
<view class="mar-right">
備注
</view>
<u-input style="flex:1;" type="text" placeholder="請輸入您需要備注的內(nèi)容" maxlength="150"
:trim="false" />
</view>
</scroll-view>
<view class="btn-topay">
立即支付 ￥398
</view>
</block>
</view>
</u-popup>彈窗內(nèi)容樣式
<style scoped lang="scss">
page {
background-color: #F5F3F7;
}
.groupbuy-detail {
width: 100%;
background-color: #F5F3F7;
}
.mar-left {
margin-left: 22rpx;
}
.mar-right {
margin-right: 22rpx;
}
.space-between {
justify-content: space-between;
}
.flex-end {
justify-content: flex-end;
}
.align-center {
align-items: center;
}
.redfont {
color: #F32E3C;
}
.lightgrayfont {
color: #999999;
}
.boldfont {
font-weight: bold;
}
.lightgrayborder {
border-bottom: 1px solid rgba(153, 153, 153, 0.15);
}
.bgwhite {
margin-top: 20rpx;
margin-bottom: 20rpx;
padding: 20rpx 24rpx;
background: white;
}
.v-look-more {
position: relative;
top: -20rpx;
padding: 20rpx;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.red-btn-r {
color: #FFFFFF;
background: #FF384B;
border-radius: 10rpx;
}
.light-red-btn-r {
opacity: 0.6;
}
.btn-follow {
padding: 8rpx 30rpx;
font-size: 26rpx;
}
.btn-buy {
padding: 14rpx 26rpx;
font-size: 26rpx;
}
.shop-infor {
margin-top: 90rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 0px 0px;
position: relative;
}
.shop-logo {
position: absolute;
top: -38rpx;
left: 44rpx;
}
.shop-btns {
padding: 26rpx 46rpx;
display: flex;
justify-content: flex-end;
}
.shop-first-infor {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 43rpx;
}
.main-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 38rpx;
}
.shop-second-infor {
padding: 0rpx 43rpx;
display: flex;
.shop-second-infor-text {
display: flex;
align-items: center;
}
.shop-second-infor-text:nth-child(1)::after {
content: '';
width: 1px;
height: 20rpx;
background: #999999;
margin-left: 20rpx;
margin-right: 20rpx;
}
}
.shop-intro {
display: flex;
align-items: baseline;
margin-top: 30rpx;
border-top: 1px solid rgba(153, 153, 153, 0.1);
padding: 22rpx 44rpx 30rpx 44rpx;
color: #666666;
}
.group-infor {
margin-top: 20rpx;
background: #FFFFFF;
padding-bottom: 30rpx;
width: 100%;
}
.group-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
padding: 42rpx 42rpx 24rpx 42rpx;
// 識別換行符,手機(jī)端小程序不生效
white-space: pre-line;
}
.group-intro {
line-height: 38rpx;
font-size: 28rpx;
margin-bottom: 10rpx;
white-space: pre-line;
}
.group-spu-1 {
margin-left: 42rpx;
margin-right: 42rpx;
margin-bottom: 14rpx;
border-radius: 10rpx;
background: #F8F8F8;
display: flex;
align-items: center;
padding: 20rpx 22rpx;
}
.group-spu-1-title {
display: flex;
align-items: center;
width: 78rpx;
word-wrap: break-word;
// 不允許收縮
flex-shrink: 0;
position: relative;
&::after {
position: absolute;
right: 0rpx;
bottom: -4rpx;
content: '';
width: 1px;
height: 84rpx;
background: rgba(153, 153, 153, 0.3);
}
}
.flex-shrink0 {
flex-shrink: 0;
}
.spu-name {
text-align: left;
word-break: break-all; // 英文換行
}
.omit {
display: -webkit-box;
-webkit-text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.spu-price {
margin-top: 4rpx;
display: flex;
align-items: flex-end;
font-size: 34rpx;
font-weight: bolder;
color: #F32E3C;
.price-etr {
padding-bottom: 4rpx;
font-size: 24rpx;
font-weight: normal;
}
}
.group-second-infor {
font-size: 22rpx;
padding: 6rpx 42rpx 0rpx 42rpx;
display: flex;
color: #999999;
.group-second-infor-text {
display: flex;
align-items: center;
}
.group-second-infor-text:nth-child(1)::after {
content: '';
width: 1px;
height: 20rpx;
background: #999999;
margin-left: 20rpx;
margin-right: 20rpx;
}
}
.v-category-title {
line-height: 45rpx;
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bolder;
color: #333333;
margin-bottom: 6rpx;
box-sizing: border-box;
}
.v-category-title::before {
content: '';
width: 6rpx;
height: 26rpx;
border-radius: 6rpx;
background: #FF384B;
// margin-left: 28rpx;
margin-right: 10rpx;
}
.v-btns {
border-bottom: 2rpx solid #F5F3F7;
position: fixed;
bottom: 0;
width: 100%;
padding: 22rpx;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
.btn {
flex: 1;
font-size: 32rpx;
padding: 20rpx;
margin: 0rpx auto;
border-radius: 12rpx;
view-align: center;
text-align: center;
border: 1px solid #FF384B;
}
.btn-fill {
color: #fff;
background: #FF384B;
}
.btn-empty {
color: #FF384B;
background: #FFFFFF;
margin-right: 22rpx;
}
}
.popup-view {
width: 100%;
display: flex;
flex-direction: column;
background-color: #F5F3F7;
border-radius: 30rpx 30rpx 0px 0px;
.popup-view-title {
background: #FFFFFF;
padding: 28rpx 33rpx;
}
.popup-view-address {
background: #FFFFFF;
padding: 24rpx 33rpx;
}
.popup-view-actual-pay {
background: #FFFFFF;
padding: 26rpx 26rpx 22rpx 26rpx;
// display: flex;
justify-content: flex-end;
}
.btn-topay {
height: 100rpx;
background: #FF384B;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
font-size: 34rpx;
}
}
/deep/ .uni-scroll-view {
// 在真正的滾動區(qū)域設(shè)置 阻斷滾動穿透
overscroll-behavior-y: contain !important;
}
</style>script
popupShow: false, popuptype: 'pay', // 步進(jìn)器 buyCountNum: 1, // 剩余數(shù)量 restNum: 0, numberBoxMin: 0, numberBoxMax: 0,
因?yàn)閺淖约捍a里扣出來的，所以可能漏東西，但是問題不大，漏啥你們再自己補(bǔ)補(bǔ)就好了。
ps:
最后發(fā)現(xiàn)，在手機(jī)端我一個(gè)手指長按屏幕的在彈窗滑倒底部的時(shí)候，手指不松開，馬上把另一個(gè)手的手指按住屏幕不松開的滑上滑下，發(fā)現(xiàn)還是存在滾動穿透了，只有這樣操作的情況下才存在，所以我的解決方法沒有很完美，如果你有其他的好法子請告訴我，謝謝。
搜了一下，一只手指按住屏幕另一只手指劃得動屏幕叫做多點(diǎn)觸控。
總結(jié)
到此這篇關(guān)于uniapp微信小程序與H5的彈窗滾動穿透解決方法的文章就介紹到這了,更多相關(guān)uniapp小程序與H5彈窗滾動穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript變量類型以及變量作用域的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
在JavaScript里嵌入大量字符串常量的實(shí)現(xiàn)方法
在JavaScript文件里嵌入大量字符串常量是經(jīng)常遇到的事。有時(shí)為了省事，就把一些界面的HTML和CSS直接寫在JS文件里2013-07-07
在現(xiàn)代Web開發(fā)中,JavaScript庫的構(gòu)建和打包是一個(gè)至關(guān)重要的環(huán)節(jié),不同的構(gòu)建方式可以影響到庫的性能、可維護(hù)性和適用性,本文將深入剖析三種主要的JavaScript模塊構(gòu)建方式：CommonJS、ES模塊和AMD,我們將深入探討它們的工作原理、適用場景以及示例代碼2023-08-08
js版掃雷實(shí)現(xiàn)代碼 原理不錯(cuò)
前一段時(shí)間在圖書館看了本關(guān)于JavaScript的書，上面講怎樣用js編推箱子小游戲。我想，那掃雷也當(dāng)然能編出來，然后就用DW試了試，結(jié)果如下。2009-11-11
JavaScript將數(shù)字轉(zhuǎn)換成大寫中文的方法
這篇文章主要介紹了JavaScript將數(shù)字轉(zhuǎn)換成大寫中文的方法,涉及javascript字符串及匹配的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
javascript(js) join函數(shù)使用方法介紹
javascript(js) join函數(shù)使用方法介紹...2007-11-11
純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能
這篇文章主要介紹了純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能,本文整理了兩個(gè)實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04
瀏覽器自帶的原生彈窗很不美觀，而且功能比較單一，絕大部分時(shí)候我們都會按照設(shè)計(jì)圖自定義彈窗或者直接使用注入layer的彈窗等等。下面小編給大家?guī)砹薐S實(shí)現(xiàn)自定義彈窗，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了JS實(shí)現(xiàn)閉包中的沙箱模式,結(jié)合實(shí)例形式分析了閉包模塊化實(shí)現(xiàn)沙箱模式的原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
JavaScript EventEmitter 背后的秘密 完整版
在這里，我們的目標(biāo)創(chuàng)建屬于我們自己的 Event Emitter 去理解背后的秘密。所以，讓我們看一下下面的代碼是怎么工作的,需要的朋友可以參考下2018-03-03