Articolo della barra laterale dell'autoscroll

Question

Mi chiedo se qualcuno potrebbe essere in grado di aiutarmi per favore.

Sono relativamente nuovo alla programmazione JavaScript, quindi chiedo per favore per la tua pazienza.

Ho messo insieme Questa pagina , che consente agli utenti di aggiungere o Rimuovere i marcatori di Google Map tramite la selezione della casella di controllo "Categoria Marker". Oltre ai marcatori rilevanti aggiunti e rimossi dalla mappa, la descrizione per ciascun marker viene aggiunta o rimossa dalla barra laterale; che è mostrato in testo arancione.

Se l'utente fa clic sull'elemento "Sidebar", verrà visualizzata la finestra Informazioni per il marcatore pertinente e se il marker è selezionato, la descrizione pertinente nell'elenco della barra laterale verrà evidenziata con uno sfondo grigio.

Il problema che ho è se un utente seleziona un marker sulla mappa La barra laterale non scorre automaticamente fino alla voce Elemento di elenco rilevante come mostrato nell'esempio su questa pagina .

Sto usando uno script di terze parti per creare la barra di scorrimento che viene visualizzata nel codice qui sotto:

<script>
        (function($){
            $(window).load(function(){
                $("#sidebar").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
                //ajax demo fn
                $("a[rel='load-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").html(data); //load new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
                        $("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top
                    });
                });
                $("a[rel='append-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").append(data); //append new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly appended content
                    });
                });
            });
        })(jQuery);
</script>

.

E questa è la sezione del codice che collega il marker della mappa e l'elemento della barra laterale.

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  infowindow.open(map,marker); 
});

.

Ho cercato di mettere un elemento overflow in entrambe le aree, sperando che questo risolverebbe il problema. Inoltre, ho anche omesso le seguenti righe per vedere se potevo trovare una soluzione:

$("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content                          
$("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top

.

Sfortunatamente i miei tentativi non hanno risolto il problema.

Mi sono appena chiesto se qualcuno potrebbe essere in grado di guardare questo per favore e fammi sapere dove sto andando male.

Molte grazie e cordiali saluti

Answer 1

Basta aggiungere la seguente riga, al tuo marker Fare clic su Gestore eventi:

$("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");

.

Quindi il tuo codice sembrerebbe:

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  $("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");
  infowindow.open(map,marker); 
});

.

che dovrebbe scorrere fino all'elemento cliccato.

Answer 2

Prova ad aggiungere una riga alla funzione del gestore di eventi:

google.maps.event.addListener(marker, 'click', function() { 
//......
  map.setCenter(marker.getPosition()); // <---Add this line
  infowindow.open(map,marker); 
});

.