uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法
滾動(dòng)穿透：
頁面里的彈窗也是可以滾動(dòng)的，然后頁面本身內(nèi)容多所以也是滾動(dòng)的，就造成，在彈窗滾動(dòng)的時(shí)候，頁面內(nèi)容也跟著滾動(dòng)了。如圖所示
ps: 電腦端分鼠標(biāo)滾輪滾動(dòng)和長(zhǎng)按鼠標(biāo)拖拽滾動(dòng)，手機(jī)端只有觸屏滑屏滾動(dòng)，即像電腦端的長(zhǎng)按鼠標(biāo)拖拽滾動(dòng)
我是在電腦上錄屏的，所以兩種情況的滾動(dòng)穿透我都錄上去
鼠標(biāo)滾輪滾動(dòng)的穿透
長(zhǎng)按鼠標(biāo)拖拽滾動(dòng)的穿透
解決滾動(dòng)穿透：
前提： 我用了UViewUi1.0版本的彈窗組件
Popup 彈出層 | uView - 多平臺(tái)快速開發(fā)的UI框架 - uni-app UI框架
然后我的場(chǎng)景是內(nèi)容局部滾動(dòng)，UView提供的內(nèi)容局部滾動(dòng)方案如下：
所以結(jié)構(gòu)是這樣的
<u-popup mode="bottom" v-model="show">
<view class="content">
<scroll-view scroll-y="true" style="height: 500rpx;">
<view>
局部?jī)?nèi)容局部?jī)?nèi)容
</view>
</scroll-view>
<view class="confrim-btn">
<u-button @click="show = false;">確定</u-button>
</view>
</view>
</u-popup>1 解決電腦端長(zhǎng)按鼠標(biāo)拖拽滾動(dòng)，即手機(jī)端的觸屏滑屏滾動(dòng)穿透問題（主要） 電腦端
重要代碼：
@touchmove.stop.prevent="() => {}"這句代碼加在scroll-view上
手機(jī)端
重要代碼（我找了好久才找到這個(gè)屬性的）：
overscroll-behavior-y: contain !important;附：overscroll-behavior: contain阻止?jié)L動(dòng)鏈接，滾動(dòng)不會(huì)傳播給祖先
當(dāng)用戶滾動(dòng)嵌入的網(wǎng)頁（或網(wǎng)頁上的任何嵌套滾動(dòng)容器）并到達(dá)末尾時(shí)，瀏覽器將開始滾動(dòng)外部頁面。這被稱為滾動(dòng)鏈。
滾動(dòng)鏈?zhǔn)侵笣L動(dòng)從一個(gè)滾動(dòng)容器傳播到滾動(dòng)鏈后面的祖先滾動(dòng)容器。
一些用戶可能會(huì)覺得這種行為很煩人。幸運(yùn)的是，可以通過將
overscroll behavior: contain應(yīng)用于嵌入頁面（或滾動(dòng)容器）的<body>元素來禁用滾動(dòng)鏈接。。body { overscroll-behavior: contain; }Firefox、Chromium 和 Edge 通過 AutoRefixer 支持此功能，但 Safari 目前還不支持此功能：
滾動(dòng)動(dòng)畫
sroll-behavior: smooth。
完整學(xué)習(xí)看這個(gè)：
overscroll-behavior - CSS（層疊樣式表） | MDN
這句代碼是css的，因?yàn)橛昧薝View的組件，所以這個(gè)要阻斷滾輪鏈，就得要阻斷真的滾動(dòng)區(qū)域（最頂上的父級(jí)），直接加在我們的局部滾動(dòng)scroll-view上是無效的，要加在最頂上的父級(jí)滾動(dòng)區(qū)，這個(gè)需要你開調(diào)試者工具找，因?yàn)槟憧赡苡脛e的組件，多包了幾層。
想改變深層元素的深層樣式，代碼如下
ps:
1、因?yàn)槭歉淖兞松顚釉氐臉邮?，所以要手?dòng)刷新一下，不要熱刷新，會(huì)沒效果哈。
2、uniapp的插件引入，支持自己直接改源碼的，所以，你可以直接去UView的彈窗文件里修改，就不用加 /deep/了。
2 解決電腦端的鼠標(biāo)滾輪滾動(dòng)穿透
其實(shí)是因?yàn)閺棿昂蛷棿暗恼谡謱樱幱皩樱]有阻止電腦端的鼠標(biāo)滾輪滾動(dòng)的操作，所以就導(dǎo)致了還存在鼠標(biāo)滾輪滾動(dòng)穿透。
這是是用了UView的組件的問題，所以直接去源碼里改
重要代碼
@mousewheel.prevent
遮罩層 u-mask:
彈窗 u-popup :
直接在這加，那彈窗的所有地方都不能鼠標(biāo)滾動(dòng)了，包括你自己的scrollview區(qū)域。
u-popup 的禁止?jié)L輪滾動(dòng)這個(gè)可以不弄，因?yàn)闈L輪滾動(dòng)挺方便的，想保留自己的scrollview區(qū)域的鼠標(biāo)滾動(dòng)，就要在非scrollview的地方加阻斷滾輪事件的操作。而且只要加了下面的代碼的，在你的局部滾動(dòng)處（scrollview)滾輪滾動(dòng)的穿透基本無了。
overscroll-behavior-y: contain !important;
我的完整效果代碼(uview源碼修改的就不貼了）
彈窗
<!-- @touchmove.stop.prevent 在u-popup已經(jīng)設(shè)置了，所以觸摸的滾動(dòng)是阻斷的，電腦鼠標(biāo)滾輪滾動(dòng)沒阻斷而已 -->
<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 里是為了兼容電腦端，阻斷上下拖拽動(dòng)作 ，手機(jī)端 使用 overscroll-behavior-y: contain !important;就足夠阻斷滾動(dòng)穿透了，@mousewheel.prevent阻止電腦端滾輪滾動(dòng)穿透-->
<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="請(qǐng)輸入您需要備注的內(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;
// 識(shí)別換行符,手機(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 {
// 在真正的滾動(dòng)區(qū)域設(shè)置 阻斷滾動(dòng)穿透
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里扣出來的，所以可能漏東西，但是問題不大，漏啥你們?cè)僮约貉a(bǔ)補(bǔ)就好了。
ps:
最后發(fā)現(xiàn)，在手機(jī)端我一個(gè)手指長(zhǎng)按屏幕的在彈窗滑倒底部的時(shí)候，手指不松開，馬上把另一個(gè)手的手指按住屏幕不松開的滑上滑下，發(fā)現(xiàn)還是存在滾動(dòng)穿透了，只有這樣操作的情況下才存在，所以我的解決方法沒有很完美，如果你有其他的好法子請(qǐng)告訴我，謝謝。
搜了一下，一只手指按住屏幕另一只手指劃得動(dòng)屏幕叫做多點(diǎn)觸控。
總結(jié)
到此這篇關(guān)于uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法的文章就介紹到這了,更多相關(guān)uniapp小程序與H5彈窗滾動(dòng)穿透內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js網(wǎng)頁側(cè)邊隨頁面滾動(dòng)廣告效果實(shí)現(xiàn)
其實(shí)這個(gè)效果不是什么難實(shí)現(xiàn)的效果，關(guān)鍵注意幾個(gè)地方就可以了2011-04-04
在JavaScript中實(shí)現(xiàn)命名空間...2006-11-11
這篇文章主要為大家詳細(xì)介紹了js利用拖放實(shí)現(xiàn)添加刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javascript jq 彈出提示效果實(shí)現(xiàn)的方法有很多，可能會(huì)在某些地方看到過，下面為大家演示個(gè)示例介紹下如何實(shí)現(xiàn)jq 彈出層，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了js無提示關(guān)閉瀏覽器窗口的兩種方法分析,需要的朋友可以參考下2016-11-11
小程序?qū)崿F(xiàn)人臉識(shí)別的項(xiàng)目實(shí)踐
人臉識(shí)別在現(xiàn)在很多地方都可以用的到,例如支付,解鎖等,本文就來介紹一下小程序?qū)崿F(xiàn)人臉識(shí)別,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
???????分享7?個(gè)實(shí)用?TypeScript?單行代碼
這篇文章主要介紹了???????分享7?個(gè)實(shí)用?TypeScript?單行代碼，其中包括泛型、斷言等高級(jí)用法，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-05-05
鼠標(biāo)滾輪編程...2007-01-01
js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02