大佬教程收集整理的这篇文章主要介绍了html – 增加溢出宽度来调整滚动条,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是场景,我有一个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; }
您可以找到一个解决方法,例如将固定宽度为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 );
对于独角兽爱好者的注意事项,我知道四月份已经完成,但在演示中有一个晚期的复活节彩蛋
以上是大佬教程为你收集整理的html – 增加溢出宽度来调整滚动条全部内容,希望文章能够帮你解决html – 增加溢出宽度来调整滚动条所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。