脚本控制自适应高度的缩短问题

所属分类: 网络编程 / JavaScript 阅读数: 316
收藏 0 赞 0 分享
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值。

在我的显示器上,两个例子没有明显的差别。你可以把显示器的刷新频率调到最低,看看哪一种方式在变化的瞬间闪烁更小,择优用之。
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多