OpenLayers 3, drag to scroll page

Question

I have a website where an OpenLayers 3 map fills part of a page. The site is intended for mobile viewing, and my problem is that I'm not able to scroll the page by pushing and dragging on the map.

I've tried disabling all interactions, and found that setting interactions: OpenLayers.interaction.defaults({mouseWheelZoom: false}) allowed me to use mouse scroll when in developer mode in Chrome.

I've adjusted the controls and interactions for the map according to my needs, but this integration with the rest of the page is still a problem.

I know that it's possible to get this effect with OpenLayers 2.

Do any of you know a way to enable this? I guess the event is called touchmove.

Answer 1

I found a workaround:

<div className={styles.resultMap} ref='map'>
    <span className={styles.draggable}>                        
    </span>
</div>

The map is placed in map. I added the following css (in css-modules):

.draggable {
  z-index: 5;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
}

So this adds an element above the map. It's also possible to give controls a higher z-index, placing them above the draggable layer.