脚本控制自适应高度的缩短问题
控制 问题 脚本 高度 适应 缩短
2023-06-13 09:13:58 时间
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";
}
我想用脚本来控制自适应高度,我用上面的代码控制了左列和右列的自适应高度。
可是有的页面因为内容多被撑得挺长,有的页面内容少,用上面的代码不能缩短了!
我就是想在访问内容少的时候,内容还能再缩回来,代码应该怎么写呢?谢谢了!
复制代码代码如下:
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"。
下面这个算法略有不同,你看哪一个效果更好(变化的瞬间人眼睛感觉到的闪烁更小)?
就是这几行代码:
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值。
在我的显示器上,两个例子没有明显的差别。你可以把显示器的刷新频率调到最低,看看哪一种方式在变化的瞬间闪烁更小,择优用之。
相关文章
- simulink实现模糊PID控制[通俗易懂]
- TCP拥塞控制机制(附面试题)
- BP人工神经网络matlab工具箱_matlab神经网络控制
- 两步搭建RustDesk服务端 – 程序员推荐的远程控制桌面、电脑工具
- Havoc:一款现代化可扩展的后渗透命令控制框架
- 完美解决UIButton imageView大小控制问题,完美适配iOS13系统图标的降级方案
- 赶紧自查这个插件!黑客可能远程控制你的谷歌浏览器
- CSS 控制Html页面高度导致抖动问题的原因详解编程语言
- 行Linux 驱动调整:命令行控制显卡(linux显卡命令)
- 使用spring aspect控制自定义注解详解编程语言
- 使用Redis解决并发控制问题(redis加锁)
- 检查精确控制Redis中Java键的过期性(redisjava过期)
- 时间使用Java操作Redis实现过期时间控制(redisjava过期)
- Linux下使用Xinput 轻松控制输入设备(xinput linux)