Question

我正在一个网站上，客户希望菜单在页面顶部是静态的，当菜单打开时，它会打开一个静态菜单，可以滚动以防菜单多于屏幕。

当用户第一次滚动菜单时，我正确地在iphone 6上工作（不确定其他iphone是否受到影响）与滚动的方向相反。第一次触摸后，它工作正常。

http://readysalteddev.co.uk/hotrod/

CSS

.menu-primary-menu-container {
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    margin: $header-scrolled-height 0 auto;
    z-index: 99999;
    display: none;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    overflow-y: auto;
    height: auto;
    max-height: 100%;
}

ul {
    padding: 0;
    list-style: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    float: left;
    display: block;
    width: 100%;
    height: 700px;
}

我在研究-webkit-overflow-scrolling: touch;可能有帮助的时候在某处读过，但显然它没有。

我正在盲目工作，因为我只有ipad和android进行测试，它看起来在这两种方面都很完美，包括每个网页浏览器（当然不是IE浏览器）

更新

刚看到另一个可能添加

的问题

     -webkit-transform: translateZ(0);
    -moz-transform:translateZ(0);
    -o-transform:translateZ(0);
    transform:translateZ(0);

可能有帮助。上传它并等待测试人员确认会发生什么。

再次更新

显然没有帮助。

Answer 1

我在菜单打开时看到一些问题（我仍然可以滚动页面）

也许你在菜单打开时禁用所有滚动

你可以添加overflow: hidden＆amp; HTML上的height: 100%;

Iphone的操作系统是什么？旧版本在position: fixed

时出现问题

检查代码后编辑

移动断点中有很多容器浮动。也许你删除那些花车
html＆amp; body收到overflow: hidden＆amp; height: 100%;
#site-navigation .menu-primary-menu-container获取fixed height＆amp; overflow: auto
- 固定高度应为100％，因此需要整个屏幕（如果您不在乎，则为450px）。但加100％不会做的伎俩。因为那个容器在一堆其他容器（其中一些）内部，具有固定的高度和溢出隐藏（不是自动）。所以，如果你想在菜单上实现100％。然后#header就是起点。使其100％高度（仅在菜单打开状态下）并沿着线下行直到您到达菜单..或获取整个菜单的#header

内部固定菜单滚动不正确

1 个答案: