首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

弹窗查看内容时 内容滚动区域设置为body区

看到渣浪的查看文章或者查看大图有个效果:弹窗查看内容时,如果内容过长有滚动条,则滚动条会被放到body区滚动 什么意思呢?...将滚动位置放到整个body中,让弹窗中内容自适应高度 这么做的好处自然很明显,body区域有更大的可视区域,来看看最后的效果 点我预览 ?...,需要设置遮罩层和弹窗的position为fixed,才能更好地保证页面有滚动条的时候位置不会出错。...fixed之后,弹窗的最大高度为视窗高度,若要使得弹窗的内容区直接显示出来,就必须设置为非fixed值,而弹窗不能少了定位,那就只能使用 absolute值了 但设置了absolute就无法计算页面有滚动条的时候的位置...,还要注意页面的滚动条会不会和弹窗中的滚动条产生冲突,如 ?

1.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了。 找了很多解决滚动穿透的方案,最终都不能完美解决。 一气之下自己js撸了一个。 效果图: ?...原理: 1、解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现。...2、取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果。...37 transY += moveY; 38 if (moveY > 0 && transY > 0) { 39 /* 鼠标向下移动...touchToBottom(params.scroll, params.bar); 117 } 118 }); 119 } 120 完整demo见github: 移动端超出滚动效果

    7.3K10

    使用VBA设置可以实时更新的打印区域

    标签:VBA 有时候,工作表中的数据经常发生更新,这样,如果要设置打印区域的话,那么每次更新后都得重新选择并设置,以便将更新的数据包括到打印区域中。...如果希望在工作表数据更新的同时,设置的打印区域也相应的更新,那该如何实现呢? 可以使用VBA代码。...PageSetup.PrintArea = .Range("A1", .Range("C" & Rows.Count).End(xlUp)).Address End With End Sub 如果数据为单元格A1所在的当前区域...如果想要让Excel自动更新设置打印区域,则需要使用工作表的Change事件。...UpdatePrintArea 'UpdatePrintAreaCur End Sub 这样,当工作表数据发生变化时,会调用UpdatePrintArea过程或者UpdatePrintAreaCur过程,重新设置打印区域

    1.9K20

    鸿蒙开发实战案例:视频卡片和列表区域的联动滚动思路

    介绍本示例使用Scroll和List组件嵌套,通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。...,给新闻列表List设置 nestedScroll 属性,指定列表向末尾端和起始端滚动时与外层Scroll的嵌套滚动方式。...})为了实现视频卡片的吸顶效果, Scroll 容器的内容高度使用 calc 计算属性设置为 Scroll 容器高度和视频高度的和,使 Scroll 滚动到尾部边缘时,视频隐藏,视频卡片吸顶。...() { // 选中的列表项下标大于3时,列表向上滚动,滚动到与列表显示区域内上方间隔3个列表项或列表尾部时停止。...,List布局时会根据可视区域按需创建ListItem组件,并在ListItem滑出可视区域外时销毁以降低内存占用。

    10210

    css增加横着滚动条_CSS 设置滚动条样式的实现「建议收藏」

    2、scrollbar corner为横向和竖向的交叉角区域 3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件 一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在css...-webkit-scrollbar /* 滚动条整体部分,重置时必须要设置 */ -webkit-scrollbar-button /* 滚动条的轨道的两端按钮 */ -webkit-scrollbar-track.../*滚动条里面的小方块*/ -webkit-scrollbar-corner /* 垂直和水平的交叉角 */ -webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */ 可以结合以下伪类进行设置...(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置): :horizontal 水平方向的track、track-piect、thumb :vertica 垂直方向的track、track-piect...:window-inactive 适用于所有scrollbar,包含滚动条的区域,焦点不在该窗口的时候 :enabled, :disabled, :hover , :active 这些伪类同样适用 IE

    3.2K20

    HTC VIVE☀️七、VRTK瞬移的实现与瞬移区域的设置——基于

    时,人物快速移动到选定的点 首先:按上一节内容配置好VRTK 瞬移1:VRTK_Basic Teleport 基础瞬移 LeftController/RightController为VRTK_Straight...Distance Blink Delay:闪屏的延时时间 Target List Policy:相应瞬移的策略设置 Nav Mesh Limit Distance:使用NavMesh控制瞬移区域的数值...瞬移3:VRTK_Dash Teleport 选中一个点,当松开TouchPad时,人物快速移动到选定的点 设定限制瞬移区域的三种方法 1️⃣ Policy List Target List Policy...Teleport:是否可进行传送 将DestinationPoint设置为瞬移区域 调大、调扁该圆柱体,为其添加BoxCollider,即可实现设置为瞬移区域 注意: 在测试中发现,因为没有添加传送策略机制...不可传送的设置为TeleportIgnore即可。 2、如“3、DestinationPoint”进行设置即可。 大家还有什么问题,欢迎在下方留言!

    8910

    移动支付时代的手机和app安全设置

    进入移动互联网时代,移动支付已被大多数都市上班族所接受,逛个超市如果你说不能支持支付宝或者微信支付,估计会被深深鄙视,甚至就连菜市场买菜都可以随手给阿姨发个红包,虽然她们不一定懂手机淘宝...然而,移动支付给人民带来方便之外,同样也带来一些安全隐患,假设手机丢失了,在手机本身以及 某些 app 没有做好安全设置的情况下,坏人通过利用手机验证码这个大杀器足以让个人敏感信息以及财产暴露在安全边界之外...pin 码一般有个初始化值,移动一般是1234,联通一般是0000。...1.手机丢失后,立即凭事先设定的服务密码电脑登录移动运营商等的网上营业厅(或者拨打人工客服),立即报这个号码停机,这个号就立即停机了,相当于这个号被暂时废掉,登录或者消费转账等需要手机验证码的功能都不能用了...12.尽量不要刷储蓄卡,避免卡被复制,特别是一些小商店,要刷pos机尽量用信用卡         13.更有安全需要的人,可以把移动支付绑定的手机号设置为另一台设备;         14.多个站点密码不要雷同

    3.4K00

    滚动穿透的6种解决方案【已自测】

    真正的问题是当我们滑动弹窗可滚动区域,把可滚动区域的内容上滑到底部或下拉到顶部后,再触发弹窗可滚动区域准备滑动,此时的背景页面就会跟随滚动。真是恐怖。...2、touchmove手势移动的时候,再次获取最新的坐标点y的值y2,(其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录,我这里写到了touchmove里,还可以再优化)。...4、进而根据不同的手势方向给弹层可滚动内容的transform添加位移translate效果(或者基础用position: absolute,再根据手势移动的距离,动态设置top的值。代码不止一种)。...问题局限: 不好的点就是没有原生滚动条那种效果,一点也不灵动,只能鼠标移动多少、可滚动区域挪动多少。...六、body滚动 + 弹层内部滚动[css+js-记录滚动位置] 换个脑子,回到最初 寻找新的思路。 不从弹层上入手,也就是不禁掉弹层的touchmove默认事件。

    13.8K31

    table固定表头,tbody滚动条样式设置以及填的几个坑

    工作中或许会用到 table 表格固定表头, tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。 ?...也可以使用 统一设置列宽: col 的属性在下面详细介绍。...可以参照 CSS滚动条选择器设置滚动条的样式,如下。 以下伪元素选择器可以修改 webkit 浏览器的滚动条样式: ::-webkit-scrollbar 整个滚动条....::-webkit-scrollbar-button 滚动条上的按钮(上下箭头) ::-webkit-scrollbar-thumb 滚动条上的滚动滑块 ::-webkit-scrollbar-track...滚动条轨道 ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分

    14.3K20

    【总结】移动应用界面设计的尺寸设置及规范

    刚接触移动应用的界面设计,最先跳入脑海的疑问是:画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现?...本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。...尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。 ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。...3、基本元素的尺寸设置 iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。...作为对照,正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。 – 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。

    3.6K40

    MySQL数据库文件的移动和权限设置

    ,免得拷贝完成再设置权限 # cp -Ra mysql /media/data/ // 老文件先不删除,保留备份防止意外 # mv mysql mysql-bak // 偷个懒,直接建一个链接,免得要修改...老的文件夹尚未删除,逐个对比了文件的权限,未发现问题。 在网上搜索了一下资料,发现大家不约而同的采用mv命令来移动数据文件夹,也是为了避免出现权限问题。而这里我为了保存备份,采用了cp -Ra。...这给出了一点线索,当前服务器Linux的版本,都已经默认了更高的安全设置。在Centos是SELinux,在Ubuntu是AppArmor。...,调整上面4行的设置 // 此外考虑到/var/lib/mysql这个路径也可能会有测试需要,所以原始的4行保留,额外增加4行也可,不差那一点点运算 // 编辑完成存盘,接着更新配置和重启AppArmor...如果使用了Centos,则要更改SELinux的额外权限设置,可参考下面链接中介绍的两个方法操作。

    7.9K20

    关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动总结

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html  之前开发的导入多个模型,旋转,分别移动什么什么的,都是在纯OpenGL...我就想着用MFC界面来开发,但是呢MFC对话框 或者单文档跟OpenGL结合的绘图区域,添加了鼠标移动的消息响应函数,可是鼠标移动的坐标打印告诉我,两者结合之后 不仅左上角坐标不是(0,0)右下角也不是常规的长宽坐标...  反正移动起来坐标跳动的非常的不规律,一会一百多,一会就几千,可是界面定义的长宽只有几百而已,这就是一个非常纠结的地方了,在MFC下与OpenGL结合 我不能通过鼠标移动的坐标来控制模型的移动了,...  我也找了很多的资料,和示例程序 都是键盘控制移动,鼠标控制图形旋转   都没有鼠标直接拖动图形移动的实现,这让我觉得可能是MFC太老了,都没有人用来搞与OpengL结合的开发了,所以就没有人研究这个两者的底层结合出现的问题...不过语法都差不多  c#中的鼠标控制良好 可以非常轻松的实现图形的拖动旋转一系列操作 若有兴趣交流分享技术,可关注本人公众号,里面会不定期的分享各种编程教程,和共享源码,诸如研究分享关于c/c++,python

    1.3K20
    领券