当光标在右列上方时，如何滚动左列?-Howtoscrollleftcolumnwhencursorisaboverightcolumn?

2  

jsfiddle

jsfiddle

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

在这个解中，我假设map是200px宽。您可以用css和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.

当鼠标悬停在最右边(映射)列时，您希望滚动最左边的列。为了实现这一点，最左边的列实际上应该占据所有的viewport，尽管看起来不是这样的。

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.

在下面的#left_container中，您可以看到它完全适合所有的.flexbox-container父边界。关键在于右边框:200px透明实体，将垂直滚动条“推”到左边。

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.

所以，当你在地图上移动鼠标滚轮时，你实际上是在#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;
}

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):

上面的CSS解决方案完全忽略了其他映射事件(dblclick, click，…)为了解决这个问题，我们需要一些JS来忽略最左侧列上的鼠标事件(参见指针事件):

  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');
    }    
  });



    

    

1  

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).

这里有一种方法可以通过Javascript将容器#canvas_container的滚动事件转移到左侧列。要实现这一点，映射必须位于容器内，并在顶部和底部填充(。微调电容器元素)。

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:

关键部分是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.

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

To play around by yourself, see this fiddle.

要自己玩，看看这个小提琴。

$(document).ready(function() {
  var post = "
Post title
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
";
  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;
}