Question

我正在尝试制作一个全屏地图Web应用程序，并在底部列出项目列表。这个想法是用户可以像许多本机移动应用程序一样向上滚动列表。

我不知道该怎么做。我制作了滚动容器'pointer-events: none;'。这样可以使后地图可点击，但是滚动不起作用。 pointer-events: onlyscroll :)会很完美，但这不存在。

这是代码：

HTML：

<div id="general">
  <div id="full_screen_map">
    HERE IS THE MAP
  </div>
  <div id="full_screen_scroll_container">
    <div id="content">
      <ul>
        <li>Item 1</li>
        ...
      </ul>
    </div>
  </div>
</div>

SCSS：

#general{
  #full_screen_map{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
  }
  #full_screen_scroll_container{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow-y: auto;
    #content{
      margin-top: 300px;
    }
  }
}

JsFiddle https://jsfiddle.net/tonicastillo/q9sa2yeh/41/

有什么主意吗？谢谢

Answer 1

这就是您要寻找的东西。我稍微改变了CSS。请看看

#general{
  #full_screen_map{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
  }
  #full_screen_scroll_container{
    position: relative; /* here I removed fixed position */
    z-index: 1;
    top: 300px; right: 0; bottom: 0; left: 0; /* added top position and removed margin */
    overflow-y: auto;
  }
}

Answer 2

解决方案是将地图放在滚动区域内。

<div id="fixed_full_screen_scroll_container">
  <div id="fixed_full_screen_map">
    FIXED MAP
  </div>
  <div id="content_with_top_Xpx">
    CONTENT WITH SCROLL
  </div>
</div>

JsFiddle：https://jsfiddle.net/q9sa2yeh/58/

此功能仅在内容区域中适用于移动触摸屏和鼠标滚轮，并且地图可单击/可拖动/等...

带有溢出的点击型容器div：自动

2 个答案: