水平滚动在iOS Safari上的视口底部50px处不起作用

Question

我在iOS Safari上发现了一个问题，底部50px无法识别水平滚动触摸事件。

＆＃13;

＆＃13;

.horizontal-scroll-nav {
    -webkit-overflow-scrolling: touch;
    background-color: #333;
    bottom: 0;
    height: $horizontal-scroll-nav-height;
    left: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    position: fixed;
    white-space: nowrap;
    width: 100%;
    z-index: 100;
}

.horizontal-scroll-nav__item {
    background-color: #444;
    color: #fff;
    display: inline-block;
    height: 100%;
    padding: 0.5rem;
    text-decoration: none;
}

.horizontal-scroll-nav__item:nth-child(odd) {
    background-color: #555;
}

＆＃13;

<!-- Place enough content here to push down native tap  bar on iOS Safari -->

<div class="horizontal-scroll-nav">
    <a href="" class="horizontal-scroll-nav__item">item 1</a>
    <a href="" class="horizontal-scroll-nav__item">item 2</a>
    <a href="" class="horizontal-scroll-nav__item">item 3</a>
    <a href="" class="horizontal-scroll-nav__item">item 4</a>
    <a href="" class="horizontal-scroll-nav__item">item 5</a>
    <a href="" class="horizontal-scroll-nav__item">item 6</a>
    <a href="" class="horizontal-scroll-nav__item">item 7</a>
    <a href="" class="horizontal-scroll-nav__item">item 8</a>
    <a href="" class="horizontal-scroll-nav__item">item 9</a>
    <a href="" class="horizontal-scroll-nav__item">item 10</a>
    <a href="" class="horizontal-scroll-nav__item">item 11</a>
    <a href="" class="horizontal-scroll-nav__item">item 12</a>
    <a href="" class="horizontal-scroll-nav__item">item 13</a>
    <a href="" class="horizontal-scroll-nav__item">item 14</a>
    <a href="" class="horizontal-scroll-nav__item">item 15</a>
    <a href="" class="horizontal-scroll-nav__item">item 16</a>
    <a href="" class="horizontal-scroll-nav__item">item 17</a>
    <a href="" class="horizontal-scroll-nav__item">item 18</a>
    <a href="" class="horizontal-scroll-nav__item">item 19</a>
    <a href="" class="horizontal-scroll-nav__item">item 20</a>
    <a href="" class="horizontal-scroll-nav__item">item 21</a>
    <a href="" class="horizontal-scroll-nav__item">item 22</a>
    <a href="" class="horizontal-scroll-nav__item">item 23</a>
    <a href="" class="horizontal-scroll-nav__item">item 24</a>
    <a href="" class="horizontal-scroll-nav__item">item 25</a>
    <a href="" class="horizontal-scroll-nav__item">item 26</a>
    <a href="" class="horizontal-scroll-nav__item">item 27</a>
    <a href="" class="horizontal-scroll-nav__item">item 28</a>
    <a href="" class="horizontal-scroll-nav__item">item 29</a>
    <a href="" class="horizontal-scroll-nav__item">item 30</a>
</div>

＆＃13;

＆＃13;

＆＃13;

在http://rangle.io的浏览器中查看 或者在https://github.com/mattmischuk/mobile-fixed-nav

下载代码示例

预期结果是在任何滚动位置，无论原生水龙头是否打开，水平滚动都应该起作用。