Question

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

Map已禁用滚轮传播，如果可能，只有CSS可以实现它。我试图用其他div用flex属性包装#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

在这个解决方案中，我假设地图是200px宽。你可以用css和js中的另一个值替换它。

当鼠标悬停在最右边（地图）列时，您想要滚动最左边的列要做到这一点，最左边的列实际上应该占据所有视口，尽管视觉上看起来不像那样。

在下面的#left_container中，您可以看到绝对适合所有.flexbox-container父级边界。诀窍部分是border-right: 200px transparent solid＆＃34;推动＆＃34;左侧的垂直滚动条。

因此，当您在地图上移动鼠标滚轮时，您实际上正在徘徊#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>

Answer 2

这是一种通过javascript将容器#canvas_container的滚动事件传输到左列的方法。要实现此目的，地图必须位于容器内，并在顶部和底部填充（.padder元素）。

这样你理论上可以向上和向下滚动，捕捉这个滚动事件并将其传递到左列。其他事件没有触及。

关键部分是这个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);
  });

我看到atm的唯一缺点是地图上可见的垂直滚动条。

要自己玩，请参阅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>

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

2 个答案: