【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动

uniapp 在u-modal中使用scroll-view完美解决滚动穿透

看了很多关于这方面的内容，最后综合所有的方案，在真机上很好的实现了需求。
我取巧通过在显隐dialog的时候获取当前的top 然后动态改变overflow的状态，并修改top 以达到可以保存页面位置不变。同时让主页面在显示弹窗的时候，弹窗中的scrollview怎么滚动都不会导致主页滚动，隐藏弹窗又可以滚动
下面说下实现 show表示弹窗显隐
动态修改根view的style，都是根据弹窗显隐改变属性。
一、在页面根view动态设置style，顺序为 show?‘’:‘’
- overflow: visible/scroll
- top:getTop()
- height: winH
- position: fixed/unset
二、在显隐弹窗的view 设置id
三、思路
显示弹窗的时候，show改变时先获取该view的top，然后设为true，
此时根view的样式变为不可滚动，top定义一个方法返回top + ’px‘ 即可，这样就保证了view不会滚动到顶部。隐藏的时候是不需要top的，返回0px即可
四、代码如下

 <!--rootview-->:style="{'position':show?'fixed':'unset','top': getTop(),'height':winH,'overflow':show?'visible':'scroll'}"

<!--设置id-->
<btton id="tpl" @clink='showDialog'...

showDialog() {uni.createSelectorQuery().in(this).select('.root-f').boundingClientRect().exec(res => {this.show= true;this.rootTop = res [0].top;console.log("*** show dialog this.rootTop", this.rootTop)})

还有一个获取root页面高度的winH，这里就不写了，没有这个高度好像不能实现这个功能。我的是root view 铺满页面的。

这样就大功告成了。
感谢其他分享的博主

【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动相关推荐

如何在Storyboard中使用Scroll view
本文章环境Xcode 11 在开始使用scroll view之前(storyboard/XIB),我们必须搞清楚两个东西在Storybord/Xib中使用Scroll view,会有哪些结构为什么 ...
小程序授权信息是保存在微信服务器,微信小程序登陆，授权，手机号授权流程及滚动穿透，保存图片等问题...
提纲: 滚动穿透登陆,授权流程手机号授权流程保存图片 webview的使用问题一二针对于,弹窗内容嵌套在蒙层内. 1. 点击弹窗外关闭, 你已经购买过该课程您已经购买该课程了,请前往听课去 ...
移动端滚动穿透与滚动溢出解决方案
滚动穿透滚动穿透.gif 问题描述在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起 ...
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
移动端滚动穿透的6种解决方案
移动端滚动穿透的6种解决方案参考文章: (1)移动端滚动穿透的6种解决方案 (2)https://www.cnblogs.com/bigkuan/p/11977674.html 备忘一下.
php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动
本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...
【NGUI基础知识】—Scroll View(滚动视图)详解
下面给大家分享下NGUI中Scroll View(滚动视图)中的各功能属性,帮助大家去理解及使用. ScrollView属性 1.Content Origin: 控制 panle 相对的 Scroll ...
当uniapp遇上滚动穿透，巧妙的解决方式~
上一次遇上这个滚动穿透,我是暴力解决的,当uniapp遇上可恶的滚动穿透的时候,我是怎么暴力解决的,今天学会了一个巧妙的方式,几行代码,超级方便好用,爱了爱了- 就是利用page-meta标签的pag ...
uniapp 微信小程序和H5的弹窗滚动穿透解决
滚动穿透: 页面里的弹窗也是可以滚动的,然后页面本身内容多所以也是滚动的,就造成,在弹窗滚动的时候,页面内容也跟着滚动了.如图所示 ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动,手机端只有触屏滑屏滚 ...
js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...

【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动

【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动相关推荐

最新文章

热门文章

【uniapp滚动穿透】 在u-modal中使用scroll-view底下主页面会跟随滚动

【uniapp滚动穿透】 在u-modal中使用scroll-view底下主页面会跟随滚动相关推荐

最新文章

热门文章

【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动

【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动相关推荐