overflow之scroll 和 auto

CSS有个overflow，为了让显示不下的内容滚动显示，通常会加上：

overflow: scroll;/ 或者 /overflow: auto;

以前我天真地以为，他们的区别仅仅是，一个始终显示滚动条（overflow: scroll

），一个按需显示滚动条（overflow: auto

）。直到遇到了一个 自适应宽度同时自动显示滚动条 的场景，才发现：

overflow: scroll

情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。

overflow: scroll

而overflow: auto

情况下，内容撑开容器的宽度包括滚动条，即使用whitespace: no-wrap;

撑开容器至正好显示所有内容时，如果有滚动条，则滚动条会覆盖在内容上方，导致内容宽度再次被缩小，然后出现省略号。由此推测渲染顺序：自适应宽度 → 根据高度显示滚动条 → 重新计算内部元素宽度

这里不会再次自适应，因此出现了内容显示不全的情况。

overflow: auto

总结一下就是，如果宽度是由内容自适应撑开的，则overflow: auto;

带来的滚动条会占用内容的一部分宽度，导致内容显示不全。

那么遇到这种情况，最直接的解决办法就是，强制显示滚动条，这也是我在StackOverflow上找到的回答。然而我并不想就这样屈服，而且在Windows上多显示个不必要的滚动条真的很丑，于是我又使用了一个不走寻常路的方法：

动态获取滚动条的宽度：var scrollbarWidth = containeroffsetWidth - containerclientWidth;// 如果没有滚动条则为0// 否则为滚动条宽度

有滚动条的时候需要在内容右侧加个padding

。测试发现，如果直接把padding加在内容元素上，则内容文字显示全了，但是背景在右侧空出了一块。于是换个思路，用一个占位元素来撑开容器，然后再显示真正想要的内容。

占位元素怎么做？其实很简单，就是把当前容器复制一份，但是给它设置：overflow: hidden; height: 0;

，不受滚动条影响宽度，同时高度为0不可见，然后用JavaScript把第1步计算的滚动条宽度作为padding-right

加上去，这样占位元素的宽度就是我们最后想要的容器宽度，可见部分的内容再自适应就完全没有问题了。

您好，要调整滚动条大小，首先您需要打开CSS（Cascading Style Sheets）文件，然后在里面添加以下代码：::-webkit-scrollbar { width: 200px; } 这段代码将滚动条的宽度设置为200px，您可以根据需要调整大小，最大可设置为500px。另外，您还可以在CSS文件中添加以下代码来调整滚动条的背景颜色：::-webkit-scrollbar-thumb { background-color: #FF0000; } 这段代码将滚动条的背景颜色设置为红色，您可以根据需要调整颜色。

1、js中获取当前屏幕宽度方法如下：

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth （包括边线的宽）

网页可见区域高： documentbodyoffsetHeight （包括边线的高）

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

2、js简介

js，是JavaScript的缩写，是一种直译式脚本语言，一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

avaScript是的源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。

给你贴两个JS函数，专门用来获取网页滚动高度和滚动宽度的：//获取网页纵向滚动高度function

getScrollTop(){

var

D

=

document;

return

Mathmax(DbodyscrollTop,

DdocumentElementscrollTop)}//获取网页横向滚动宽度function

getScrollLeft(){

var

D

=

document;

return

Mathmax(DbodyscrollLeft,

DdocumentElementscrollLeft)}应该可以解决你的问题。

查看原帖>>

<DIV ID=oDiv STYLE="overflow:scroll; width:200; height:100"> </DIV>

<BUTTON onclick="alert(oDivclientHeight)">client height</BUTTON>

<BUTTON onclick="alert(oDivoffsetHeight)">offset heightY</BUTTON>

这段代码你应该看得懂，这里你要搞清楚四个属性：

clientHeight：获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

clientWidth：获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

offsetHeight：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。

offsetWidth：获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

详细的属性请参阅Dhtml手册

问题一：js 中怎么获取当前屏幕的宽度 documentdocumentElementclientWidth 这个方法返回页面在当前窗口中可见部分的宽度(不包括滚动条宽度)；

windowinnerWidth 这个方法返回页面在当前窗口中可见部分宽度(包括滚动条宽度);

windowouterWidth 返回浏览器窗口自身宽度，包括菜单和边框；

screenwidth 返回设备的(屏幕宽度)

问题二：js网页如何获取手机屏幕宽度 ]@]@]

@sssss

var x = navigator;

var w=windowinnerWidth

|| documentdocumentElementclientWidth

|| documentbodyclientWidth;

var h=windowinnerHeight

|| documentdocumentElementclientHeight

|| documentbodyclientHeight;

documentgetElementById(p1)innerHTML=屏幕分辨率:+screenwidth + + screenheight+内部窗口: + w + + h

不知道是不是这个 屏幕分辨率 ：pc上的桌面分辨率 。手机上是 一个型号固定的分辨率比如

华为8813的分辨率是480854。。 内部窗口是 改变窗口大小刷新一下就有新的数据

问题三：用javascript 怎样才能很好的获取手机的屏幕宽度和高度 一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是Android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。

问题四：如何获得当前屏幕的高度 windowonload = function(){ 获取屏幕高度 documentdocumentElementclientHeightconsolelog(documentdocumentElementclientHeight); 获取屏幕宽度 documentdocumentElementclientWidthconsolelog(documentdocumentElementclientWidth);}

问题五：html中 如何获取屏幕宽度 把以下这段代码放到之间或之间预览即可看到数据

/将获取的值存到变量里/

width_screen=screenwidth;

height_screen=screenheight;

availWidth_screen=screenavailWidth;

availHeight_screen=screenavailHeight;

colorDepth_screen=screencolorDepth;

/end/

/输出值/

documentwrite(你的屏幕宽为：+width_screen+

你的屏幕高为：+height_screen+

你的屏幕可用宽为：+availWidth_screen+

你的屏幕可用高为：+availHeight_screen+

你的颜色设置所有为数为：+colorDepth_screen);

/end/

问题六：怎么用jquery来获取屏幕的宽度和高速 $(window)width();$(window)height();严格来说，获取window才对

问题七：javascript怎么获取屏幕大小 1

2

3

4

5

6

7

8

9

windowonload = function(){

获取屏幕高度 documentdocumentElementclientHeight

consolelog(documentdocumentElementclientHeight);

获取屏幕宽度 documentdocumentElementclientWidth

consolelog(documentdocumentElementclientWidth);

}

问题八：PHP怎么获取屏幕的宽度与高度？ 10分 PHP是无法获取屏幕的高度和宽度的，你可以用JS来获取

Javascript:

网页可见区域宽： documentbodyclientWidth网页可见区域高： documentbodyclientHeight网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)网页可见区域高： documentbodyoffsetHeight (包括边线的高)网页正文全文宽： documentbodyscrollWidth网页正文全文高： documentbodyscrollHeight网页被卷去的高： documentbodyscrollTop网页被卷去的左： documentbodyscrollLeft网页正文部分上： windowscreenTop网页正文部分左： windowscreenLeft屏幕分辨率的高： windowscreenheight屏幕分辨率的宽： windowscreenwidth屏幕可用工作区高度： windowscreenavailHeight屏幕可用工作区宽度： windowscreenavailWidth

JQuery:

$(document)ready(function(){alert($(window)height()); 浏览器当前窗口可视区域高度alert($(document)height()); 浏览器当前窗口文档的高度alert($(documentbody)height());浏览器当前窗口文档body的高度alert($(documentbody)outerHeight(true));浏览器当前窗口文档body的总高度 包括border padding marginalert($(window)width()); 浏览器当前窗口可视区域宽度alert($(document)width());浏览器当前窗口文档对象宽度alert($(documentbody)width());浏览器当前窗口文档body的宽度alert($(documentbody)outerWidth(true));浏览器当前窗口文档body的总宽度 包括border padding margin})

问题九：怎样用 JavaScript 准确获取手机屏幕的宽度和高度 屏幕分辨率的高：windowscreenheight

屏幕分辨率的宽：windowscreenwidth

网页可见区域宽：documentbodyoffsetWidth

网页可见区域高：documentbodyoffsetHeight

问题十：Android开发 怎样获取屏幕的宽高是多少厘米 我们需要获取Android手机或Pad的屏幕的物理尺寸，以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸

下面的代码即可获取屏幕的尺寸。

在一个Activity的onCreate方法中，写入如下代码：

[java] view plain copy print

DisplayMetrics metric = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(metric);

int width = metricwidthPixels; 屏幕宽度（像素）

int height = metricheightPixels; 屏幕高度（像素）

float density = metricdensity; 屏幕密度（075 / 10 / 15）

int densityDpi = metricdensityDpi; 屏幕密度DPI（120 / 160 / 240）

DisplayMetrics metric = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(metric);

int width = metricwidthPixels; 屏幕宽度（像素）

int height = metricheightPixels; 屏幕高度（像素）

float density = metricdensity; 屏幕密度（075 / 10 / 15）

int densityDpi = metricdensityDpi; 屏幕密度DPI（120 / 160 / 240）

但是，需要注意的是，在一个低密度的小屏手机上，仅靠上面的代码是不能获取正确的尺寸的。比如说，一部240x320像素的低密度手机，如果运行上述代码，获取到的屏幕尺寸是320x427。因此，研究之后发现，若没有设定多分辨率支持的话，Android系统会将240x320的低密度（120）尺寸转换为中等密度（160）对应的尺寸，这样的话就大大影响了程序的编码。所以，需要在工程的AndroidManifestxml文件中，加入supports-screens节点，具体的内容如下：

[html] view plain copy print

>

以上就是关于overflow之scroll 和 auto全部的内容，包括:overflow之scroll 和 auto、csp怎么调滚动条大小、js 中怎么获取当前屏幕的宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！