解决滚动条消失和水平居中跳动变化的问题
来源:互联网 发布:刷钻了 淘宝刷钻网 编辑:程序博客网 时间:2024/06/07 02:59
js:document.body.style.overflow = "hidden";和document.body.style.overflow = "hidden";
或者
Jquery:$("body").css("overflow","hidden");和$("body").css("overflow","auto");
将滚动条隐藏以达到目。
然而这样做会有一个问题,就是网页整体的宽度会随之改变,就我的Google浏览器的滚动条宽度来说是17px,通常在设置网页整体样式的水平宽度时候都是用百分比控制的,在滚动条消失的时候整体的宽度会变大从而使用百分比控制的水平宽度变大,这时候网页会出现跳动,这种跳动让人看着很不舒服。
解决这个问题的思路很简单,只要设置网页的body和右边的边距就好了。
我是使用vue2.0去实现的。Vue2.0有个重要的属性叫做数据绑定,即我在方法外定义的参数在方法内可以直接引用,在方法内改变该参数的值作用会作用于全局,所以我的方法不会有任何传参传参和返回任何值的操作,但是整体的思路是一样的。
首先我得先说明一下,以下这段代码不是我写的,是我百度后从http://www.haorooms.com/post/js_scroll_width拷走同时小小修改了一下的代码。这段代码的作用是获取滚动条的宽度。为了适应不同的浏览器不同的情况下的滚动条的宽度可能不是17px的情况。
getScrollbarWidth() { var oP = document.createElement('p'), styles = { width: '100px', height: '100px', overflowY: 'scroll' }, i; for (i in styles) oP.style[i] = styles[i]; document.body.appendChild(oP); this.scrollbarWidth = oP.offsetWidth - oP.clientWidth; oP.remove(); },
当我们获取宽度的时候,只需要在你要隐藏滚动条的时候同时调用$("body").css("padding-right",this.scrollbarWidth);这句话便可在滚动条隐藏网页水平宽度增加的时候,使得整个网页的往左移动滚动条的宽度从而使网页保持在原来的位置(就是不会出现网页略微右移动的效果)。
当然,假设你是要做一个弹框。那么你使用left:50%来设置居中,50%针对的是整个网页的宽度,你会发现将这个框框向左移动貌似没有效果。解决思路我想了很久。最后用一个比较麻烦的方法去解决了:只要将百分比换成定死的长度就OK ,但是这样会降低网页在各种情况下的适应性。所以我用动态改变的长度去替代百分比从而解决了这个问题。
公司项目改需求了,等完成项目后再继续更新T T。。。
直接粘上代码吧
//动态设置弹出框所在位置并隐藏滚动条(适应任何宽度) setDialog(){ this.getScrollbarWidth(); var s = (window.outerWidth - this.scrollbarWidth)/2; $(".succ-pop").css("left",s); $("body").css("overflow","hidden"); $("body").css("padding-right",this.scrollbarWidth); }这个思想是计算水平宽度的一半然后再用jquery方法设置css样式
//这几句话才是核心,调用的getScrollbarWidth()方法在上面,目的是获取滚动条的宽度 this.getScrollbarWidth(); var s = (window.outerWidth - this.scrollbarWidth)/2; $(".succ-pop").css("left",s);
- 解决滚动条消失和水平居中跳动变化的问题
- 如何解决滚动条使页面跳动的问题
- 关于浏览器出现滚动条和消失页面不跳动
- Intellij Idea 滚动条跳动的问题
- Intellij Idea 滚动条跳动的问题
- 解决JScrollPane水平滚动条不显示的问题
- C#关于自带滚动条控件的滚动条跳动问题
- C#关于自带滚动条控件的滚动条跳动问题
- 图片和span水平垂直居中问题(主要解决小图标+文字水平垂直居中的问题)
- MFC LISTBOX滚动条(垂直滚动条和水平滚动条)问题
- 解决CListCtrl闪烁及水平滚动条不能跟踪拖动的问题(MFC)
- 解决CListCtrl闪烁及水平滚动条不能跟踪拖动的问题(MFC)
- 解决CListCtrl闪烁及水平滚动条不能跟踪拖动的问题(MFC)
- Android webview解决图片过大出现水平滚动条的问题
- div图片水平垂直居中不随滚动条滚动的CSS代码(兼容IE8+)
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法
- firefox下滚动条消失引起页面抖动的问题
- ie7下div的竖立滚动条消失问题
- 5.4 成员变量的隐藏和方法重写
- 搜索中的数据价值
- Go实战--golang中使用echo框架中JSONP(labstack/echo)
- 后端_第四课_开始使用COOKIE和SESSION
- greenDAO的使用详解---(5)greenDAO高级用法
- 解决滚动条消失和水平居中跳动变化的问题
- Aras innovator: 如何搜索指定长度的字符串
- 链接提交-js代码推送进化版
- CentOS 下 mysql数据库自动备份 mysql数据库恢复
- Linux(centOS)下安装mysql-rmp
- java 反射机制
- 分布式应用框架Akka快速入门
- 菜鸟进阶---论代码优化及代码规范细节的重要性
- Coursera—machine learning(Andrew Ng)第六周编程作业