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值。
在我的显示器上,两个例子没有明显的差别。你可以把显示器的刷新频率调到最低,看看哪一种方式在变化的瞬间闪烁更小,择优用之。
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值。
在我的显示器上,两个例子没有明显的差别。你可以把显示器的刷新频率调到最低,看看哪一种方式在变化的瞬间闪烁更小,择优用之。
标签:
脚本控制自适应高度的缩短问题
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“脚本控制自适应高度的缩短问题”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。