我在使用position: absolute
的元素上滚动条时遇到了一些问题。我正在经历的行为是chrome 21和firefox 15在框内显示滚动条,调整其内容大小,从而隐藏了一些文本,但是歌剧12和Internet Explorer 9也在内部显示它,但没有调整其内容和调整大小相反的盒子(在我看来是正确的,因为盒子没有定义宽度)。是否有任何解决方案可以使这4种浏览器看起来相同?
JsFiddle:http://jsfiddle.net/Kukkimonsuta/GaMD7/2/
编辑:正如Siva Charan指出的那样,当overflow-y设置为“滚动”时,它可以正常工作,但是显示滚动条始终是不需要的
修改:我的最终解决方案基于Siva Charan和anonymous down voting is lame
的答案http://jsfiddle.net/Kukkimonsuta/GaMD7/15/
function updateAutoScroll(element) {
var $element = $(element);
if (element.scrollHeight > element.clientHeight)
$element.css("overflow-y", "scroll");
else
$element.css("overflow-y", "auto");
}
答案 0 :(得分:2)
在所有浏览器中动态执行此操作的唯一方法是使用JavaScript,为简单起见,我使用了jQuery。
http://jsfiddle.net/iambriansreed/mYuQx/
$(function(){
// loops through each container
$('.container').each(function(){
if(this.scrollHeight>this.clientHeight)
$(this).children().wrapAll(
'<div style="padding-right:'+scrollbarWidth()+'px;"/>'
);
});
// gets the browsers current scrollbar width
function scrollbarWidth() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() -
child.height(99).innerWidth();
parent.remove();
}
return width;
};
});
答案 1 :(得分:1)
将overflow-y: scroll;
添加到.container.two
.container.two {
top: 250px;
overflow-y: scroll;
}
参考 LIVE DEMO
如果您感觉舒服,可以使用text-overflow: ellipsis;
并将
替换为实际空间
答案 2 :(得分:0)
这更像是一种解决方法而不是实际的解决方案,但它可能已经足够好了。基本上,首先将container two
的内容包装在另一个div
中,并为其添加一些正确的填充。确保您还在width: 100%
中设置了.item
。
以下是您演示的修改版本:little link。
这不完美,但我希望它有所帮助!