获取整个页面包括滚动条的宽度，获取滚动条宽度

更正！！！！！！！！

下面的代码没用了，

今天看到了 window.outerWidth 这个属性，直接就能取到整个页面包括滚动条的宽度；评论说 window.innerWidth 才是对的, 刚刚 chrome 下试了试, 全屏时两者一样, 缩小一点后 innerWidth 更准, outerWidth 多了 16 px.

同时，下面的代码也可以用 document.documentElement.clientWidth 来做阈值判断。

原因

想要做响应式设计，遇到——本来没有滚动条，缩小窗口时出现竖直滚动条，因为获取不到document+滚动条的宽度，所以可能莫名其妙的，没有在设置好的断点处达成相应效果。所以需要获取整个页面包括滚动条的宽度做判断。

解决办法

实时获取当前浏览所用浏览器的滚动条宽度

//获取当前浏览器滚动条的宽度，原理是设置一个不可见的div，查看设置scorll前后的宽度差function getScrollWidth() {var noScroll, scroll, oDiv = document.createElement("DIV");oDiv.style.cssText = "position:absolute;top:-1000px;width:100px;height:100px; overflow:hidden;";noScroll = document.body.appendChild(oDiv).clientWidth;oDiv.style.overflowY = "scroll";scroll = oDiv.clientWidth;document.body.removeChild(oDiv);return noScroll-scroll;}//当窗口载入或者缩放时，若窗口宽度过小，则改竖式导航为横式导航function changeNav() {//检测滚动条部分$("body").scrollTop(10);//控制滚动条下移10px//说明有滚动条，则此时width要减去滚动条宽度if( $("body").scrollTop()>0 ){if ($('html').width() - getScrollWidth() < 768) {$('#container').removeClass('tabs-left');} else {if (!$('#container').hasClass('tabs-left')) {$('#container').addClass('tabs-left');}}}else{//                没有滚动条，直接检测widthif ($('html').width() < 768) {$('#container').removeClass('tabs-left');} else {if (!$('#container').hasClass('tabs-left')) {$('#container').addClass('tabs-left');}}}}$(window).resize(changeNav);$(window).resize();};

获取整个页面包括滚动条的宽度，获取滚动条宽度相关推荐

js根据url获取html页面,JS 通过url地址栏获取html页面名称
有的时候需要获取页面名称,为此我在这里封装了一个方. 一.分别根据传递不同的参数,获取到html页面的名称. 通过传递参数,获取到html页面的名称:参数params 以下是参数解释说明 (1)par ...
flask从服务器获取html页面,flask的ajax、获取服务器数据、放到前端页面、如果数据存在显示标签、如果不存在不显示标签...
-------------------------------------第一部分----------------------------------------------------------- ...
php 伪静态获取当前页面路径_php伪静态如何获取地址栏url -
PHP+MYSQL/开发视频教程解决方法 [img]http://www.caopeng.org/html/image/php.jpg[/img] 曹鹏 PHP+MYSQL 为网络开发提供流行动力 ...
关于Iframe嵌入页面，获取内部页面高度的办法
项目中经常会嵌入别人的页面,如果不知道被嵌入页面的高度,就没法给Iframe高度赋值,内部嵌入的页面就会出现滚动条,影响页面的美观. 1.如果被嵌入页面和当前页面不跨域,可以使用Iframe的@loa ...
php获取当前页面数据,ThinkPHP如何获取当前页面URL信息？
THINKPHP获取当前页面URL信息想要获取当前页面的url信息,可以借助thinkphp自带的request类来获取当前的url信息使用\think\Request类$request = Re ...
微信小程序获取当前页面url
微信小程序获取当前页面url 微信小程序获取当前页面的URL地址
浏览器滚动条高度的获取
浏览器滚动条高度的获取开始最近做业务需求时,需要监听滚动条scoll事件,获取滚动条高度,用的document.body.scrollTop发现得到的值一直是0,后来做了一些查询,挖出不少秘密,做 ...
获取当前html的名字,c#获取当前页面名字
昨天做权限管理,给普通管理员分配权限,做法是: 1,高级管理员表 2,普通管理员表(其中包含可管理的文件夹名称) 3,文件夹表在普通管理员管理的时候,需要检验权限所以现在主要要进行的是取到页面的当 ...
page分页问题，根据页码获取对应页面的数据，接口调用
添加一个log.js文件,进行接口调用. import axios from '@/libs/api.request'const MODULE_URL = '/log';export const ac ...

获取整个页面包括滚动条的宽度，获取滚动条宽度

更正！！！！！！！！

原因

解决办法

获取整个页面包括滚动条的宽度，获取滚动条宽度相关推荐

最新文章

热门文章