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

Question

当我在 map Canvas 上滚动时，如何上下滚动左栏？

map 已经禁用了滚轮传播，如果可能的话只能通过 CSS 来实现它会很好。我尝试用其他具有 flex 属性的 div 包装 #map_canvas 并将 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

在此解决方案中，我假设 map 的宽度为 200px。你可以在 css 和 js 中用另一个值替换它。

您想在鼠标悬停在最右侧( map )列时滚动最左侧的列。
要实现这一点，最左边的列实际上应该占据所有视口(viewport)，尽管视觉上看起来不像那样。

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

因此，当您在 map 上移动鼠标滚轮时，实际上是将鼠标悬停在 #left_container 的右边界上，从而上下移动它，而不是 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;
}

上述 CSS 解决方案，完全忽略了其他 map 事件(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>