html – 增加溢出宽度来调整滚动条
发布时间:2020-12-14 18:53:27 所属栏目:资源 来源:网络整理
导读:什么应该是我的CSS使一个div调整其宽度,当滚动条可见. 这是场景,我有一个div和子元素 div id="ListHolder" ul id="LeftList" li/li li/li li/li /ul ul id="RightList" li/li li/li li/li /ul/div 我想在滚动条溢出时自动调整我的div宽度.意味着当没有滚动条
什么应该是我的CSS使一个div调整其宽度,当滚动条可见.
这是场景,我有一个div和子元素 <div id="ListHolder"> <ul id="LeftList"> <li></li> <li></li> <li></li> </ul> <ul id="RightList"> <li></li> <li></li> <li></li> </ul> </div> 我想在滚动条溢出时自动调整我的div宽度.意味着当没有滚动条时,它应该像左边的图像,当滚动条变得可见时,它应该自动调整滚动条的宽度.我不想使用javascript,而是使用纯CSS和HTML.我相信只有CSS和HTML才有可能. 考虑到上面的UL列表,我的CSS是类似的 #ListHolder { display:inline-block; } #ListHolder > ul { width:250px; //<---Necessary to keep fixed width not percentage display:inline-block; } #ListHolder > ul > li { display:inline-block; } #LeftList { float:left; } #RightList { float:right; } 解决方法
正如其他人所提到的那样,没有办法仅使用CSS来调整基于滚动条件的div的宽度.
您可以找到一个解决方法,例如将固定宽度为demo here中的滚动条的宽度.这是一个简单有效的scollbar出现在您的内容中,但滚动条出现时不会更改容器的宽度. CSS无法根据滚动条存在设置容器的条件宽度,如: >如果我有一个滚动条给我这个宽度 所以为了达到这个确切的行为,你不能使用CSS. 我写了这个简单的JS(没有库需要它是轻量级的)代码,给你你正在寻找的行为: var div= document.getElementById('ListHolder'); var hasVerticalScrollbar= div.scrollHeight>div.clientHeight; if (hasVerticalScrollbar > 0) { div.style.width = '530px' ; } 现在,这只适用于页面加载.如果您在窗口调整大小时还需要此行为,则可以添加: window.addEventListener( 'resize',function( event ) { var hasVerticalScrollbar= div.scrollHeight>div.clientHeight; if (hasVerticalScrollbar > 0) { div.style.width = '530px' ; } else{ div.style.width = '500px' ; } },false ); DEMO HERE 对于独角兽爱好者的注意事项,我知道四月份已经完成,但在演示中有一个晚期的复活节彩蛋 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |