Google Maps + Anker Scrolltop zu div

Question

Ich versuche, ein Hover-oder Klick-Ereignis auf einem Google Maps Marker Scroll-down ein scrollbares div. Ich habe so weit gekommen:

Example

Sie können sehen, dass die Scroll offensichtlich ausgeschaltet ist. Ich kann nicht verstehen, warum das passiert. Ich habe bereits versucht, die Schriftrolle auf den Körper anzuwenden und nicht das Ganze zu reparieren, aber es behebt das Problem nicht. Wordpress plugin Erweiterte benutzerdefinierte Felder wird verwendet, um einfach hinzuzufügen, Orte, so Hinzufügen von ID usw. ist ein bisschen schwierig, wie seine PHP-Schleife durch Marker, es sei denn, es wäre mit einem $i++ Zähler.

Das sind meine Skripte:

Dieser Code ich in meinem Google Maps-API hinzugefügt haben:

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

Jeder Artikel ein A hat mit lat und lng Attribute, und in der Google-JS diese bekommt a .find (siehe liTag). Es findet jeden eindeutigen Marker richtig, da er die Divs und die Marker gut hervorhebt.

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

Ich würde die Hilfe sehr zu schätzen wissen!

Answer 1

Ihre .gmaps div hat position:fixed und deshalb der Browser denkt, dass die .row div, die die .gmaps div enthalten 0 Höhe hat, so denkt er, dass Scrollen überflüssig ist.

Um dies zu beheben, entweder .gmaps div position:static oder position:relative machen und passen es andere CSS-Attribute ist, oder einige height zu .row mit dem .gmaps div zuweisen.

So zum Beispiel verwenden diese CSS für .gmaps stattdessen das Sie haben:

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