Question

我遇到了一个非常奇怪的问题。我有一个ul的项目清单＆gt; li，在一个可水平滚动的div中，但我只能在我的手机上滚动div（当我打开调试面板并单击一个元素时运行Android L dev预览，无论它是什么元素。它工作正常我的台式电脑，但这是针对移动网站的。

我似乎无法在jsfiddle中重现错误，但这里是CSS和HTML。

http://jsfiddle.net/ya58twmj/1

HTML

<div class="wrapper">
    <ul>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#opening_times">Opening Times</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#activities">Activities</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#timetable">Timetable</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#map_directions">Map/Directions</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#events">Events</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="/venues">View other venues</a>

        </li>
    </ul>
</div>

CSS 忽略一些欺骗性属性，这是从计算出的css选项卡中复制出来的。

.wrapper {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    float: left;
    font-family:'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 52px;
    line-height: 20px;
    min-height: 1px;
    overflow-x: auto;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    position: relative;
    text-align: left;
    width: 360px;
}

ul {
    box-sizing: content-box;
    color: rgb(255, 255, 255);
    display: block;
    font-family:'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 20px;
    left: 0px;
    line-height: 20px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 6px;
    text-align: left;
    white-space: nowrap;
}

li {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-family:'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 0px;
    text-align: left;
    white-space: nowrap;
}

有谁知道这里到底发生了什么？

Answer 1

那令人讨厌的Z-Index ......

有一个隐藏的菜单有效阻止我实际点击该div滚动。

虽然我不知道为什么它适用于开发工具。

这基本上就是我所拥有的。 http://jsfiddle.net/ya58twmj/3/

<div id="hidden"></div>
<div class="wrapper">
    <ul>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#opening_times">Opening Times</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#activities">Activities</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#timetable">Timetable</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#map_directions">Map/Directions</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="#events">Events</a>

        </li>
        <li> <i class="fa fa-chevron-right hidden-lg hidden-md"></i>  <a href="/venues">View other venues</a>

        </li>
    </ul>
</div>

#hidden {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
}
.wrapper {
    z-index:1;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    float: left;
    font-family:'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 52px;
    line-height: 20px;
    min-height: 1px;
    overflow-x: auto;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    position: relative;
    text-align: left;
    width: 360px;
}
ul {
    box-sizing: content-box;
    color: rgb(255, 255, 255);
    display: block;
    font-family:'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 20px;
    left: 0px;
    line-height: 20px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 6px;
    text-align: left;
    white-space: nowrap;
}
li {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-family:'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 0px;
    text-align: left;
    white-space: nowrap;
}

在调试面板中选择元素时，Div仅可滚动

1 个答案: