滚动条不起作用答案

【问题标题】：Scrollbar not working滚动条不起作用
【发布时间】：2014-01-19 11:28:01
【问题描述】：

下面是我的html文件，

<div class="col-xs-6 col-sm-3 my1" id="qwer1" role="navigation">        <!--Change is made here-->
          <div class="menuBar">
            <ul class="menuList" id="menuList">
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <hr>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->

下面是css文件，

.my1
{
    position:fixed;
    left:78%;
    border-left:1px solid black;
    border-bottom:1px solid black;
    width:20%;
    top:14%;
    height:auto;
    overflow:scroll;
    scroll-face-color:red;
}

html 文件的内容完全不在屏幕上，但滚动条却无法操作。此外，我已将滚动条的颜色指定为红色，但颜色效果似乎也不起作用。下面是浏览器截图，

如何激活此滚动条？提前致谢。

【问题讨论】：

标签： html css scrollbar

【解决方案1】：

问题是你指定了：

height:auto;

在.my1 规则下，div 将根据需要扩展高度以容纳内容。

如果您已固定高度，您将激活滚动条。

查看演示：http://jsfiddle.net/audetwebdesign/myPZB/

就尝试设置滚动条颜色的样式而言，感兴趣的属性是：

scrollbar-face-color

我认为目前只有 IE 浏览器支持。

参考：http://msdn.microsoft.com/en-us/library/ie/ms531157%28v=vs.85%29.aspx

【讨论】：

感谢马克，当我将高度指定为 500 像素时，滚动条起作用了，但我仍然无法获得“红色”颜色。对此有任何指示吗？

【解决方案2】：

height:50%

试试这个..我测试没问题..如果 'auto' ，滚动不起作用

【讨论】：

【解决方案3】：

如果您的 html 中有以下元标记，则此问题可能会解决：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

另外，一定要删除height auto

【讨论】：