滚动条仅显示x滚动

时间:2013-11-18 11:57:39

标签: css webkit scrollbar

我有一个奇怪的问题...我的textarea只显示x-sroll ...不知道为什么y-scroll没有显示..已经尝试将所有设置为!important,position:relative with z-index:999999等

x-scroll仅用于测试。

有人认识到这个问题吗? 我也在使用粉底3。

的CSS:

div.forum_new_thread textarea{
position: relative;
width:488px;
top: 131px;
height:212px;
border: none;
resize:none;
background: #f4f9f4;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
overflow-x:scroll;
overflow-y:scroll;
font-size: 18px;
padding:15px;
color:#2f2f2f!important;
font-family: 'vaud_display_medium';

}



div.forum_new_thread textarea::-webkit-scrollbar {
width: 18px;
border-left:1px solid #5a5a5a;
}

div.forum_new_thread textarea::-webkit-scrollbar-track {

background:black;

}

div.forum_new_thread textarea::-webkit-scrollbar-thumb {
background:#5a5a5a;
border:1px solid black;
}

Scrollbar

1 个答案:

答案 0 :(得分:0)

如果你愿意,试试这个。第一次看不到x-scroll但是在将文本输入textarea时你可以看到它。

<html>
    <head>
        <style>
        div.forum_new_thread textarea{
position: relative;
width:488px;
top: 131px;
height:212px;
border: none;
resize:none;
background: #f4f9f4;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
overflow-x:scroll;
overflow-y:scroll;
font-size: 18px;
padding:15px;
color:#2f2f2f!important;
font-family: 'vaud_display_medium';

}



div.forum_new_thread textarea::-webkit-scrollbar {
width: 18px;
border-left:1px solid #5a5a5a;
}

div.forum_new_thread textarea::-webkit-scrollbar-track {

background:black;

}

div.forum_new_thread textarea::-webkit-scrollbar-thumb {
background:#5a5a5a;
border:1px solid black;
}

        </style>
    </head>
    <body>
        <div >
            <div class='forum_new_thread'>
                    <textarea>

                     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                       took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
                       but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                        release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
                         PageMaker including versions of Lorem Ipsum.

                    </textarea>
            </div>
        </div>
    </body>
</html>