登录  /  注册
首页 > web前端 > js教程 > 正文
脚本控制自适应高度的缩短问题_javascript技巧
php中文网
发布: 2016-05-16 19:08:27
原创
1102人浏览过
function vvheight() {
var sideleft=document.getElementById("content-left").scrollHeight;
var sideright=document.getElementById("content-right").scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
document.getElementById("content-left").style.height=layoutHeight+"px";
document.getElementById("content-right").style.height=layoutHeight+"px";
}

我想用脚本来控制自适应高度,我用上面的代码控制了左列和右列的自适应高度。
可是有的页面因为内容多被撑得挺长,有的页面内容少,用上面的代码不能缩短了!
我就是想在访问内容少的时候,内容还能再缩回来,代码应该怎么写呢?谢谢了!
复制代码 代码如下:

function vvheight() {
var CL=document.getElementById("content-left");
var CR=document.getElementById("content-right");
while(parseInt(CL.scrollHeight)==parseInt(CL.style.height)){CL.style.height=parseInt(CL.style.height)-30+"px"}
var sideleft=CL.scrollHeight;
while(parseInt(CR.scrollHeight)==parseInt(CR.style.height)){CR.style.height=parseInt(CR.style.height)-30+"px"}
var sideright=CR.scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
CL.style.height=layoutHeight+"px";
CR.style.height=layoutHeight+"px";
}

解答:
在IE和Opera里,DIV的style.overflowY的默认值是"auto",上面的代码不会有问题。

在Firefox和Safari里,DIV的style.overflowY的默认值是""(相当于"hidden"),所以你直接用上面代码的话,会出错。需要人为调整style.overflowY="auto"。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面这个算法略有不同,你看哪一个效果更好(变化的瞬间人眼睛感觉到的闪烁更小)?

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

就是这几行代码:

复制代码 代码如下:

while(CL.scrollHeight==CL.clientHeight){CL.style.height=CL.clientHeight-30+"px"}
var sideleft=CL.scrollHeight;
while(CR.scrollHeight==CR.clientHeight){CR.style.height=CR.clientHeight-30+"px"}

没有太多时间,就先随便讲一讲吧。如果感兴趣的人多,以后我可以开一些这样的专题,或者写到书里去。

元素的scrollHeight属性是微软在IE中首创的DHTML属性,并非W3C规范或技术推荐标准的内容,但是现在几乎所有的浏览器都在支持这个属性(这是因为W3C标准中并没有相应的替代方案——因此我通常不提“标准”二字,而总是说“兼容、可用”)。scrollHeight是元素在内部不出现纵向滚动条的情况下在页面上显示时将占据的高度(像素数)。
[attach]64076[/attach]

clientHeight也不是W3C规范的东西(事实上,很多有用的东西都与“标准”无关,但它们是事实上的标准)。clientHeight是元素在页面中显示时实际占据的高度(像素数)。
[attach]64077[/attach]

如果使元素内部不出现纵向滚动条(给元素足够多的空间,令其可以完整显示;或者将其纵向滚动条禁用,也就是将style.overflowY设为"hidden"),则scrollHeight==clientHeight。

在滚动条出现时,clientHeight < scrollHeight,元素未能在页面上完整显示,若要令其完整显示,则至少需要scrollHeight像素高度的空间。

也就是,元素内部出现纵向滚动条时,scrollHeight就是令元素得以完整显示的最小高度。

在上面第一个例子中,我不断缩短DIV的高度(每次缩短30像素),直到DIV内部滚动条出现,取此时的scrollHeight值。

在第二个例子中,我直接把DIV高度设为1像素,迫使其内部出现滚动条,取scrollHeight值。

在我的显示器上,两个例子没有明显的差别。你可以把显示器的刷新频率调到最低,看看哪一种方式在变化的瞬间闪烁更小,择优用之。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学