CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 绝对定位元素内的本机滚动条大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在使用position的元素上的滚动条有一些问题:绝对.我正在经历的行为是chrome 21和firefox 15在框内显示滚动条,调整其内容,从而隐藏了一些文本,但是歌剧12和Internet Explorer 9也在内部显示它,但没有调整其内容并调整大小相反的盒子(在我看来是正确的,因为盒子没有定义宽度).是否有任何解决方案可以使这4种浏览器看起来相同?

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

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

编辑:我的最终解决方案基于Siva Charananonymous 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");
}

解决方法

在所有浏览器中动态执行此操作的唯一方法是使用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;
    };

});

大佬总结

以上是大佬教程为你收集整理的css – 绝对定位元素内的本机滚动条全部内容,希望文章能够帮你解决css – 绝对定位元素内的本机滚动条所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: