谷歌地图+锚滚动到div

Question

我正在尝试在谷歌地图标记上进行悬停或单击事件，向下滚动可滚动的 div。我已经走到这一步了：

Example

您可以看到滚动条明显关闭。我似乎无法弄清楚为什么会这样。我已经尝试将卷轴应用到正文而不是使整个固定，但这并不能解决问题。 Wordpress 插件高级自定义字段用于轻松添加位置，因此添加 ID 等有点困难，因为它的 php 循环通过标记，除非它使用 $i++ 计数器。

这些是我的脚本：

我在我的 Google 地图 api 中添加了这段代码：

google.maps.event.addListener(marker, 'mouseover', function() {
liTag=$(".locations-item").find("[data-lat='" + $marker.attr('data-lat') + "']");
marker.setIcon(icon2);
this.setOptions({zIndex:10});
$(liTag).addClass('active');
$(".locations-item a").addClass('fade');
$('.gmap-scroll').animate({
         scrollTop: $(liTag).offset().top
 } );
});


google.maps.event.addListener(marker, 'mouseout', function() {
liTag=$(".locations-item").find("[data-lat='" + $marker.attr('data-lat') + "']");
marker.setIcon(icon1);
  this.setOptions({zIndex:1});
$(liTag).removeClass('active');
$(".locations-item a").removeClass('fade');
});

每个项目都有一个带有 lat 和 lng 属性的 A，在 google JS 中，这得到一个 .find（参见 liTag）。它可以正确地找到每个唯一的标记，因为它可以很好地突出显示 div 和标记。

<div class="locations-item text-center">
<a data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
[IMAGE OF LOCATION]
</a>
</div>

非常感谢您的帮助！

Answer 1

您的.gmaps div 有position:fixed，这就是为什么浏览器认为包含.gmaps div 的.row div 的高度为0，因此它认为滚动是不必要的。

要解决此问题，请将.gmaps div 设为position:static 或position:relative 并调整其其他css 属性，或将一些height 分配给包含.gmaps div 的.row。

因此，例如，将这个 CSS 用于 .gmaps，而不是你拥有的那个：

position: relative;
height: 400px;
width: 100%;