js固定滚动条，锁定页面

最新推荐文章于 2024-07-20 13:48:02 发布
最新推荐文章于 2024-07-20 13:48:02 发布
阅读量1.7k 收藏
点赞数
文章标签： python 前端 ViewUI
原文链接：https://my.oschina.net/u/2480675/blog/517678
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

固定页面，类似于alert()之后的效果：

    代码：

<body id="scroll">
    ……
</body>

 

    在要执行的js语句中加入以下语句：

document.getElementById("scroll").style.overflow= "hidden";

 

    解除固定效果语句：

document.getElementById("scroll").style.overflow= "visible";

 

自动滚动到页面底部（jquery）：

window.scrollTo(0,document.body.scrollHeight);

    感觉还有不少关于滚动条方面的知识，见下面的链接。

*注：在参考各位大神的语句后，不能执行，但是我这样写就能实现效果；

        在重写类似alert()时碰到的问题。

转载于:https://my.oschina.net/u/2480675/blog/517678

weixin_34337381
关注
Js 锁定当前页面滚动条
Tongyao
06-07 820
js锁定当前滚动条
js是滚动条滑到固定位置_js实现div滚动条在页面刷新 滚动条位置固定
weixin_29952601的博客
01-14 330
思想：1.通过div的onscroll事件记录滚动条的scrollTop值，设置到document.cookie2.页面加载时再读取document.cookie的值，设置给div的scrollTopjs代码实现：function KeepScrollBar() {var scrollPos;if (typeof window.pageYOffset != 'undefined') {scroll...
JS 滚动条控制
最新发布
weixin_45456477的博客
07-20 885
缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖。当产生滚动条的元素不是windows元素时,window.scrollTo就会失效。优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑。此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素。缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题。缺点：需要知道产生滚动条的元素，否则无法生效。优点：代码简单，可靠性高。缺点：不能指定偏移量。
用JS锁定页面滚动条
captainl77的博客
11-21 5922
/**  * 禁用滚动条  */ function unScroll(){ var top=$(document).scrollTop(); $(document).on('scroll.unable',function (e){ $(document).scrollTop(top); }) } /**  * 解除禁用滚动条  */ function removeU
jquery滚动条固定在某一位置
weixin_30698297的博客
11-26 753
查看历史消息的时候，需要将滚动条维持在正在查看的消息位置。 本方法是通过添加属性data-msg获取当前的位置，offset().top获取滚动距离，demo如下： html： <div class="box"> <div class="messageBox"> <p>原数据1</p> <p>原数据2</p> ...
js 禁止背景滚动 遮罩禁止滚动 和 可以滚动 实测可用
weixin_44484873的博客
04-01 361
//十八、 页面禁止滚动 stopScroll(){ var el = document.getElementsByTagName('body')[0]; el.style.overflow = "hidden"; } //十九、 页面保持滚动 stayScroll(){ var el = document.getElementsByTagName('body')[0]; el.style.overflow = "auto"; } 更多在线前端布局 特效 模板 功能 交互 .
解决Vue页面固定滚动位置的处理办法
08-30
解析Vue页面固定滚动位置的处理办法 本篇文章主要介绍了解决Vue固定滚动位置的处理办法。解决这个问题需要了解两个关键点：一是 Vue 页面的滚动固定位置的实现方法，二是浏览器的滚动位置恢复行为。 一、Vue 页面...
js 固定位置的层 不随滚动条滚动
05-01
在网页设计中，"js 固定位置的层 不随滚动条滚动" 是一个常见的需求，主要用于实现诸如固定顶部导航、侧边栏或者底部客服窗口等元素。这些元素在用户滚动页面时始终保持在屏幕的特定位置，提升用户体验，让用户可以...
js阻止移动端页面滚动的两种方法
10-20
在移动设备上，当用户在页面中进行交互时，有时我们需要阻止页面的默认滚动行为，以便实现特定的交互效果，例如弹出模态框、滚动锁定等。本文将详细介绍两种JavaScript方法来阻止移动端页面的滚动。 ### 方法一：...
js表格前几列不动后几列随滚动条移动css html,固定表格前两列，后面列随滚动条移动...
weixin_35778245的博客
06-07 1327
(function() {var $container = $('.wxcep-table');$container.css({position: 'relative',overflow: 'auto'});$container.find('table').css({borderCollapse: 'collapse',whiteSpace: 'nowrap'})var $head = $cont...
Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 2667
iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动
javascript实现蒙版与禁止页面滚动
m0_53062068的博客
12-18 945
在网页设计中，我们经常会使用到蒙版。所谓蒙版，顾名思义，就是“蒙在上面的一层板”。一般用黑色或添加品牌色的半透明遮罩效果，遮盖住下层界面，展示蒙版上层内容。在引导说明、模态加载、模态弹窗等多种情况都会涉及到蒙版，今天浅谈一些我遇到的关于蒙版的问题，希望对你也有启发和帮助。
JS禁止滚动条滚动
drakseason的博客
08-07 2339
我们在写项目时候可能会遇到这样一种效果：点击按钮，弹出一个对话框，此时只能在框内操作，此时滚动条消失并禁止滚动或是这样的。
js禁止页面滚动，页面不抖动
weixin_46653941的博客
09-16 2506
应用场景：页面内存在多个滚动条或存在需要鼠标滚动操作的模块，此时需要禁止浏览器的滚动事件，且页面不抖动。
js实现页面滚动，菜单固定
热门推荐
HELLO WORLD
05-11 1万+
相信大家都遇到过滚动页面需要固定某些内容不跟随页面滚动而滚动的情况，以往项目中也比较多，一直没有分享，今天刚好有空，来做个小分享。 项目需求： 页面处于顶部时右侧“在线客服”静止不动 当页面往下滚动，右侧在线客服悬浮于顶部 页面滚动至最大高度时，右侧在线客服与左侧内容底部对齐，相对静止 思路： 页面处于顶部时只需右浮动即可，滚动超过本身高度时设置fixed使元素块可以固定悬...
html右侧浮动固定,JS实现网页右侧固定的浮动层
weixin_32535825的博客
06-02 566
无标题文档body{margin:0px;padding:0px;margin-top:60px;margin-bottom:60px;}#div_nav_zone_right{position:absolute;float:right;z-index:3;width:120px;height:100px;right:0px;top: 332px;background-color:#999;}#d...
JS 禁用背景页面滚动
我就是我不一样的美男子！
09-07 1528
var s_top=0; // 禁止滚动 function bodyScroll(event){ event.preventDefault(); } //禁止背景页面滚动 function unScroll(){ s_top = $(window).scrollTop(); document.body...
js禁止屏幕滚动和取消限制
Leijiang0504的博客
02-11 2476
点点赞兄弟们~
使用原生JS实现滚动条滚动到页面底部继续加载数据
"JS实现滚动条滚动到页面底部继续加载" 本文主要介绍了使用原生JS实现滚动条滚动到页面底部继续加载的方法。该方法通过为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值