8

我在元素上的滚动条上遇到了一些问题position: absolute。我遇到的行为是 chrome 21 和 firefox 15 在框中显示滚动条，调整其内容的大小从而隐藏了一些文本，但是歌剧 12 和 internet explorer 9 也在内部显示它，但没有调整它的内容大小和调整大小而是盒子（我认为这是正确的，因为盒子没有定义宽度）。有什么解决方案可以让这 4 个浏览器看起来一样吗？

JsFiddle：http: //jsfiddle.net/Kukkimonsuta/GaMD7/2/

编辑：正如 Siva Charan 指出的那样，当溢出-y 设置为“滚动”时它可以正常工作，但是总是显示滚动条，这是不需要的

编辑：我基于Siva Charan的回答和匿名否决投票的最终解决方案是蹩脚的

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");
}
4

3 回答 3

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;
    };

});
于 2012-09-10T14:38:42.677 回答
1

添加overflow-y: scroll;到.container.two

.container.two {
    top: 250px;
    overflow-y: scroll;
}

参考现场演示

更新：

如果你觉得舒服，你可以使用text-overflow: ellipsis;和更换&nbsp;到实际空间

于 2012-09-10T13:48:06.287 回答
0

这更像是一种解决方法，而不是实际的解决方案，但它可能已经足够好了。基本上，首先将 的内容包装container two在 anotherdiv中，并为其添加一些正确的填充。确保您还设置width: 100%了.item.

这是您演示的修改版本：little link。

这并不完美，但我希望它有所帮助！

于 2012-09-10T14:20:07.757 回答