背景图不随弹出框里的文字滑动而滑动

最新推荐文章于 2025-04-16 07:01:15 发布
最新推荐文章于 2025-04-16 07:01:15 发布
阅读量357 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 技术资料 文章标签： 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38747509/article/details/88112275
本文介绍如何在Vue项目中使用bodyScrollLock库来控制弹窗内元素的滚动。通过在模板中为需要滚动的元素添加ref属性，并在watch中调用disableBodyScroll和enableBodyScroll方法，可以实现对页面滚动的精确控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

bodyScrollLock.es6.js需提前下载

import {

disableBodyScroll,

enableBodyScroll,

clearAllBodyScrollLocks

} from "@/js/fn/bodyScrollLock.es6.js";

 

vue模板中需要滚动的弹窗里的文字div加ref="rule"

 

vue在watch的时候执行：

watch: {

ruleBox(val) {

if (val) {

disableBodyScroll(this.$refs.rule);

} else {

enableBodyScroll(this.$refs.rule);

}

}

},

详细见https://github.com/willmcpo/body-scroll-lock

完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
hahahhahahahha123456的博客
08-07 1789
在main.js中设置全局函数： //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动 } //弹出框可以滑动 Vue.prototype.canScroll
html背景图片不动内容根据滚动条滚动
12-04
背景图片不动内容根据滚动条滚动 图片不动 html
如何保证对话框中的文字过长时可以上下滑动查看，而不会导致下面的按钮发生位移
bangelua的专栏
03-19 939
如何保证对话框中的文字过长时可以上下滑动查看，而不会导致下面的按钮发生位移？ <ScrollView android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" > <TextView
移动端网页、公众号兼容性问题记录
qq_33198051的博客
03-25 3686
每个客户使用的设备都各不相同，所以会出现各种品牌手机样式或者js不兼容的情况，这里我们在做项目中也遇到并记录了各种兼容问题的一些产生与解决方案，避免以后再次出现兼容性问题影响客户体验，同时在代码编写上就提前规避到兼容问题，提高开发效率。 一、iOS中多个position:fixed中z-index失效导致的坑 项目中难免会遇到一些弹框提示，在ios苹果手机，多个position:fixed导致层级关系失效，弹窗无法显示。怎么调试都无法实现（如图），部分苹果手机不会出现此问题。 对于这个兼容性问题这边进行实
vue中移动端禁止页面滚动
jane900的博客
01-13 3119
vue中移动端禁止页面滑动穿透 1 通过样式 // 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTag...
禁用body滚动条的兼容写法
weixin_44283589的博客
04-27 405
注意，这种方法只是禁用了 body 元素的滚动条，而不是禁用整个页面的滚动条。如果需要禁用整个页面的滚动条，可以将上述代码中的 document.body 改为 document.documentElement。在禁用滚动条时，将 position 属性设置为 fixed，并且将 scrollTop 设置为 0，就可以禁用滚动条。在启用滚动条时，将 position 属性和 top 属性设置回原来的值就可以了。
弹出框显示图片轮播
02-19
通常，它会遮盖住背景页面，用户必须关闭弹出框后才能继续与背景交互。弹出框的设计包括样式、大小、位置以及关闭按钮等元素，需要确保其不影响用户体验，同时能够清晰地展示内容。 2. **图片轮播**：图片轮播是一...
jQuery弹出层插件三种简单遮罩弹出框效果.rar
02-27
- animation：定义弹出框的显示和关闭动画，如fade（淡入淡出）或slide（滑动）。 -睦duration：动画持续的时间，单位为毫秒。 -睦padding：弹出框与页面边缘的距离。 -睦background：遮罩层的颜色。 -睦...
自定义JavaScript弹出框组件
02-11
在网页开发中，自定义JavaScript弹出框组件是不可或缺的一部分，它允许开发者创建具有高度定制化功能的对话框，以满足各种用户交互需求。本文将深入探讨如何利用JavaScript实现这样的组件，包括其基本原理、设计思路...
CSS实现鼠标滑过文字弹出一段说明文字无JS代码
09-25
代码中提到了一个背景图片URL，这可能用于为弹出框添加背景装饰。 总之，这个CSS实现的鼠标滑过文字弹出说明文字的功能，通过CSS的伪类选择器和定位技术，实现了无需JavaScript的动态效果，这对于不支持JavaScript...
Body Scroll Lock 项目教程
gitblog_00986的博客
03-28 241
Body Scroll Lock 项目教程 1. 项目的目录结构及介绍 body-scroll-lock 是一个用于在显示模态框或其他固定元素时锁定页面滚动的小型开源库。下面是该项目的目录结构及文件介绍： body-scroll-lock/ ├── .circleci/ # CI/CD 配置文件 ├── examples/ # 使用示例...
修复body-scroll-lock 启动后，在版本为 4.0.0-beta.0 的 iOS Safari 中滚动到文档顶部
weixin_45043472的博客
05-17 151
修复body-scroll-lock 启动后，在版本为 4.0.0-beta.0 的 iOS Safari 中滚动到文档顶部
【react-use】基本使用
qq_45677671的博客
08-03 8743
文章目录简介传感器用户界面动画效果副作用生命周期状态 简介 随着 React Hooks 的发展，各个团队都开始尝试使用 Hooks 代替 Class，Hooks 正逐渐成为 React 组件的主流写法。得益于 Hooks 的逻辑封装能力，我们可以将常见的逻辑封装起来，以减少代码复杂度。或者使用社区上别人封装的 Hooks，比如 react-use 等。react-use 是社区最流行的 Hooks 库 github地址：https://github.com/streamich/react-use
Body-scroll-lock 项目使用教程
最新发布
gitblog_00076的博客
04-16 419
Body-scroll-lock 项目使用教程 1. 项目目录结构及介绍 body-scroll-lock 是一个开源项目，用于在不禁用目标元素滚动的情况下，锁定页面主体的滚动。以下是项目的目录结构及文件介绍： body-scroll-lock/ ├── examples/ # 示例文件夹，包含项目使用的示例代码 ├── flow-typed/ ...
response.text不显示body内容_滑动穿透(锁body)终极探索
weixin_39887221的博客
11-29 258
场景当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动；然而事实并非如此。 如图所示，浮层下边的内容并没有如想象中不受影响。解决先去github上搜索一番，发现有解决此问题的开源包，简单粗暴直接挑选了其中star的最高的(body-scroll-lock)操作一番！ 使用后发现有一些问题：安卓端全挂ios端偶尔会有锁不住的情况查源码发现该包在iOS端使用禁止touc...
CSS背景属性
weixin_30386713的博客
07-02 977
背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。body {background-color:#99FF00;} 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。 演示示例 背景图片属性(background-image) 这个属性为HTML元素设定背景图片，相当于HTML中background属性。&...
CSS中背景图片滚动属性background-attachment
热门推荐
张波的技术积累
01-08 2万+
该属性用来定义背景图片是否随浏览器滑块的拖动而滚动，在背景图片滚动属性中，可以使用两个属性值，分别为scroll和fixed，      background-attachment: scroll | fixed;      *scroll:   背景图片随滑块的变化而滚动。      *fixed: 背景图片固定不动。          New Document
弹出框 背景固定 滑动
会飞的程序猿
07-22 591
// 弹出框 背景滑动问题 style.cssText 弹出框父级absolute body fixed 弹出框absolute 也是一种解决方案 val 变量，当前弹出框状态 huaDong (val) { let scrollTop = 0 if (document.scrollingElement) { scrollTop =...
背景图片不跟随滚动条滚动
caimaomaocai的博客
06-28 5992
我们在做网页的时候，当背景是一张完整的图片，不动让其跟随滚动条滚动，怎么办？下面详细讲解一下。CSS代码示例-背景颜色属性(background-color):&lt;html&gt; &lt;head&gt; &lt;title&gt;背景颜色 background-color&lt;/title&gt; &lt;style type="text/css"&gt; body {backgroun...
掌握多种参数的jQuery弹出框实现及样式选择指南
在这个文件中，我们重点讨论的是jQuery弹出框，这种弹出框不仅仅是单一形式的，而是支持多种接口参数，允许开发者根据需要选择不同的样式和行为，为用户界面增添丰富多样的交互元素。 ### 知识点详解 #### jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值