滚动条高度-页面禁止滚动与复原

最新推荐文章于 2023-08-07 16:45:30 发布

半夏遮流年シ

最新推荐文章于 2023-08-07 16:45:30 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/weixin_42671417/article/details/106517943

版权

滚动条高度

document.body.scrollTop = document.documentElement.scrollTop = 0;

2. 页面禁止滚动与复原

进行网页开发的时候，我们往往需要限制用户在一段时间内不可以操作滚动条。
这样可以防止一些非法操作。

所以可以这样控制：

document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';//手机版设置这个。
1
2
如果想复原的话怎么办？
hidden改成scroll？ no…
那样在body边缘会再出来一个边框

hidden改成visible即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

半夏遮流年シ

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

04-WebApl

人俗话不多

03-08

626

Web Apis 和 JS基础关联性 JS 的组成 API 和 Web api MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都有输入和输出 ( 函数的传参和返回值...

前端学习笔记 - HTML+CSS

fengxm0309的博客

10-07

4732

基础认知网页什么是网页网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang

参与评论您还未登录，请先登录后发表或查看评论

JS禁止滚动条滚动

最新发布

drakseason的博客

08-07

2302

我们在写项目时候可能会遇到这样一种效果：点击按钮，弹出一个对话框，此时只能在框内操作，此时滚动条消失并禁止滚动或是这样的。

js禁止滚动条滚动

xiasnn的博客

10-12

1万+

方法一：将body设置为fixed（滚动条会消失，页面会抖动，比较麻烦） //弹层背景滑动问题 var top1 = 0; function stopBodyScroll(isFixed) { var bodyEl = document.body if (isFixed) { top1 = window.scrollY bodyEl.style.position =

<a>标签使用技巧一则：阻止滚动条上滚。

03-09

261

在一个超链接中可以使用href 和onlick，有时要在A的标记同时使用，在同时使用时，有时让href起作用或者失效，那么如何设计呢？使用javascript的时候,通常我们会通过类似： <a href="#" onclick="javascript:方法">提交</a> 提交的方式,通过一个伪链接来调用javascript方法。这种方法有一个问题是：虽...

阻止滑动滚动条

weixin_33830216的博客

05-28

266

var top = $(document.body).scrollTop(); $(window).scroll(function(e){ e.preventDefault(); $(document.body).scrollTop(top); //window.console.log("jj"); }); 转载于:https://www.cnblogs.com/wewe...

浏览器强制显示滚动条

iteye_11287的博客

06-02

420

//强制显示滚动条: html { overflow: scroll; } //强制隐藏滚动条: html { overflow: hidden; } //隐藏IE的水平滚动条: html { overflow-x: hidden; } //隐藏IE的垂直滚动条: html { overflow-y: hidden; } //强制显示IE的水平滚动条: html { overf...

html 和 css 代码总结

m0_55170432的博客

04-13

1392

标题

注册表知识与技巧大全

热门推荐

08-03

1万+

注册表知识和技巧大全注册表基础： ********系统文件夹：********* 名称路径含义 AppData C:＼Windows＼Application Data 应用程序 Cache C:＼Windows＼Temporary Internet Files

HTML基础知识汇总

qq_43544490的博客

08-03

3418

------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>

css实用技巧——锁定页面，禁止滚动 vs 解锁页面，恢复滚动

朝阳39的博客

04-15

4769

使用场景 1. 弹出弹窗时，隐藏右侧滚动条，并锁定页面，禁止弹窗下的页面滚动 2. 网页较长时，用户可以临时锁定当前浏览的位置，避免页面意外滚动到其他位置核心代码锁定页面，禁止滚动（实现原理：用overflow 'hidden' 消除滚动条，并用等宽的透明右边框填充，避免页面可用宽度变化，引起布局改变） lockScroll() { let widthBar = 17, root = document.documentElement; if (typeof wind..

JS防止页面滚动与复原

益达的小作坊

03-26

1042

参考文章：http://blog.sina.com.cn/s/blog_4714e47801019f6o.html在进行网页开发的时候，我们往往需要限制用户在一段时间内不可以操作滚动条。这样可以防止一些非法操作。所以可以这样控制：document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidd

菜鸟学习篇--如何解决内容超出页面高度出现滚动条问题

YJJ19的博客

09-18

3495

当页面内容超出页面高度并且出现滚动条时，可以直接在页面最外层添加overflow:hidden;但由于vue组件直接给body添加css样式是无效的，因此，可以这么做： mounted() { document.getElementsByTagName("body")[0].style = "overflow: hidden;"; }, 其实不仅可以用overflow:hidden; height:100vh; overflow-x: hidden; overflow-y: h

scrollview 上下滑动禁止弹回效果

铁杵成针

11-11

5036

scrollview 上下滑动禁止弹回效果。烦了我几天，希望能帮助需要的人。 android:overScrollMode="never"

设置高度去除滚动条

weixin_30505485的博客

06-13

240

function setHeight(that) { var _this = that[0]; _this.style.height = ""; _this.style.height = _this.scrollHeight + "px";} 转载于:https://www.cnblogs.com/sunnie-cc/p/7001768.html

取消Chrome记录滚动条位置

记录前端生涯一些经验感悟和思考

04-22

2093

遇到一个难题，就是页面有时进入后总是会自动滚动到底部。起先以为是代码问题，查找了整个系统没发现相关操作。后来才后知后觉html5新增window.history.scrollRestoration属性，这是一个实验性质的api，chrome 46以上版本都支持浏览器自身加了这个设定是好意，但是有些页面用户希望不要记住滚动条位置。经过尝试在代码中加入执行以下代码可以解决问题 if ("scr...

js禁止和启用移动端页面内容滚动

xdongll的专栏

06-16

8710

直接上代码： this.onTouchMove(true);//禁用this.onTouchMove(false);//启用 onTouchMove(inFlag) { if (inFlag) { document.addEventListener('touchmove', this.onHandler, false); } else { documen

禁止系统默认滚动条

weixin_43269800的博客

01-07

513

overflow:scroll在浏览器中的机制单独给html设置时，窗口出现滚动条。 html{ overflow:scroll } 单独给body设置时，窗口出现滚动条。 body{ overflow:scroll } 给html和body都设置时，body出现滚动条，窗口也出现滚动条。 html{ overflow:scroll } body{ overflow:scroll } 原因...

H5页面出现弹窗时，阻止滚动条滚动

Mr_yangx的博客

04-08

3686

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,init

Element-ui ElScrollBar 滚动条实战与源码解析

1. 阅读源码：为了调用ElScrollBar，你需要深入理解Element-ui的源码结构，找到与滚动条相关的部分。这包括查看组件的API，如native、wrapStyle、wrapClass、viewClass和viewStyle等属性，以及noresize和tag选项，...