当光标在右列上方时如何滚动左列？

Question

How to scroll up and down the left column when I'm scrolling over the map canvas?

Map has disabled scroll wheel propagation, it would be nice to accomplish it if possible only by CSS. I've tried to wrap #map_canvas by other div with flex property and set map to position absolute and 100vh/vw, but it doesn't make difference with wheel bubble.

 $(document).ready(function() { var post = "<h3>Post title</h3><div>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div><hr>"; var i = 0; while (i < 10) { $('#left_container').append(post); i++; } var options = { zoom: 10, scrollwheel: false, center: new google.maps.LatLng(49, 17) }; var map = new google.maps.Map($('#map_canvas')[0], options); $("#map_canvas").scrollLeft(); }); 

 .flexbox-container { display: -ms-flex; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; height: 100vh; } .flexbox-container #left_container { flex: 1; padding: 0 5px; overflow-y: auto; height: 100vh; } #map_canvas { flex: 2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> <div class="flexbox-container"> <div id="left_container"></div> <div id="map_canvas"></div> </div> 

Answer 1

jsfiddle

In this solution, I am assuming map is 200px wide. You can replace it by another value in css and js.

You want to scroll the leftmost column when the mouse is hover the rightmost (map) column.
To accomplish this, the leftmost column should actually occupy all the viewport, although visually does not look like that.

In the #left_container below, you can see that is absolutely placed to fit all .flexbox-container parent boundaries. The trick part is the border-right: 200px transparent solid that "pushes" the vertical scroll bar to the left.

So, when you move your mouse wheel on the map, you are actually hovering the #left_container 's right border and thus moving it up and down, not the map.

.flexbox-container {
  height: 90vh;
  position: relative;
}

#left_container {
  padding: 0 5px;
  overflow-y: auto;
  display: inline-block;
  height: 100%;
  border-right: 200px transparent solid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

#left_container.scrollMap {
  pointer-events: auto;
}

#map_canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
}

The above CSS solution, completely ignores other maps events (dblclick, click,...)
To fix that, we need a bit of JS to ignore mouse events on the leftmost column (see pointer-events ):

  var map_canvas = $('#map_canvas')[0],
      $left_container = $('#left_container'),
      $parent = $('.flexbox-container'),
      options = {
          zoom: 10,
          scrollwheel: false,
          center: new google.maps.LatLng(49, 17)
      },
      map = new google.maps.Map(map_canvas, options),
      wheelEvent = function (e) {
          $left_container.addClass('scrollMap');
      };

  map_canvas.addEventListener('mousewheel', wheelEvent);
  map_canvas.addEventListener('DOMMouseScroll', wheelEvent);
  $parent.mousemove(function (e) {
    if (e.clientX < $parent.width() - 200) {
      $left_container.addClass('scrollMap');
    } else {
      $left_container.removeClass('scrollMap');
    }    
  });


<div class="flexbox-container">
    <div id="left_container" class="scrollMap"></div>
    <div id="map_canvas"></div>
</div>

Answer 2

Here's a way to transfer the scroll event of a container #canvas_container to the left column by javascript. To accomplish this, the map has to be inside a container and padded at the top and bottom ( .padder elements).

This way you can theoretically scroll up and down, catch this scroll event and transfer it to the left column. Other events are not touched.

The key part is this javascript:

  $canvas_container = $('#canvas_container')
  $left_container = $('#left_container');
  initial_offset = 100;

  $canvas_container.scrollTop(initial_offset);

  $canvas_container.on('scroll', function(e) {
    $left_container.scrollTop($left_container.scrollTop() + $canvas_container.scrollTop() - initial_offset);
    $canvas_container.scrollTop(initial_offset);
  });

Only drawback I see atm is the visible vertical scroll bar on the map.

To play around by yourself, see this fiddle .

 $(document).ready(function() { var post = "<h3>Post title</h3><div>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</div><hr>"; var i = 0; while (i < 10) { $('#left_container').append(post); i++; } var options = { zoom: 10, scrollwheel: false, center: new google.maps.LatLng(49, 17) }; var map = new google.maps.Map($('#map_canvas')[0], options); $canvas_container = $('#canvas_container') $left_container = $('#left_container'); initial_offset = 100; // same as height of .padder $canvas_container.scrollTop(initial_offset); $canvas_container.on('scroll', function(e) { $left_container.scrollTop($left_container.scrollTop() + $canvas_container.scrollTop() - initial_offset); $canvas_container.scrollTop(initial_offset); }); }); 

 .flexbox-container { display: -ms-flex; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; height: 80vh; } .flexbox-container #left_container { flex: 1; padding: 0 5px; overflow-y: auto; height: 80vh; } #canvas_container { flex: 2; height: 80vh; overflow-y: scroll; } #map_canvas { height: 100%; } .padder { height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> <div class="flexbox-container"> <div id="left_container"></div> <div id="canvas_container"> <div class="padder"></div> <div id="map_canvas"></div> <div class="padder"></div> </div> </div>