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

Question

当我滚动地图画布时,如何向上和向下滚动左列？

Map已禁用滚轮传播,如果可能,只有CSS才能完成它.我试图#map_canvas用flex属性包装其他div并将map设置为绝对位置和100vh/vw,但它与轮泡没有区别.

$(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

在此解决方案中，我假设地图很200px宽。您可以将其替换为 css 和 js 中的其他值。

当鼠标悬停在最右边（地图）列时，您想要滚动最左边的列。
为了实现这一点，最左边的列实际上应该占据所有视口，尽管视觉上看起来并非如此。

在#left_container下面，您可以看到它绝对适合所有.flexbox-container父边界。技巧部分是border-right: 200px transparent solid将垂直滚动条“推”到左侧。

因此，当您在地图上移动鼠标滚轮时，您实际上是悬停在 的#left_container右边界上，从而上下移动它，而不是地图。

.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;
}

上面的CSS解决方案完全忽略了其他地图事件（dblclick，click，...）
为了解决这个问题，我们需要一些JS来忽略最左边一列上的鼠标事件（参见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>