Autoscroll邊欄條目

我想知道是否有人能夠幫助我。Autoscroll邊欄條目

我對JavaScript編程比較陌生，所以請耐心等待。

我已經放在一起this頁面，該頁面允許用戶通過「標記類別」複選框選擇添加或刪除Google地圖標記。除了從地圖中添加和移除相關標記之外，每個標記的描述都會添加到「邊欄」中或從「邊欄」中移除;以橙色文字顯示。

如果用戶點擊'邊欄'項目，相關標記的信息窗口將被顯示，如果選擇了標記，邊欄列表中的相關描述將用灰色背景突出顯示。

我遇到的問題是，如果用戶在地圖上選擇標記，側邊欄不會自動滾動到項目相關列表項，如this頁面上的示例所示。

我使用的是第三方腳本來創建它在下面的代碼顯示滾動條：

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

這就是代碼鏈接的地圖標記和側邊欄項目的部分。

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

我試圖把overflow項目在這兩個領域，希望這會解決問題。此外，我還省略了以下幾行，看看我是否能拿出一個解決方案：

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

不幸的是我的努力沒有解決的問題。

我只是想知道是否有人能夠看到這個請讓我知道我要去哪裏錯了。

許多的感謝和親切的問候

來源

2012-09-29 IRHM

這將有助於如果你有一個鏈接到您的網站 –

嗨@davidstrachan，非常感謝您花時間回覆我的文章。如果我沒有在我原來的帖子中說清楚，我很抱歉。但我確實提供了一個有關該頁面的鏈接，但請再次找到該鏈接。 http://www.mapmyfinds.co.uk/chris/test.php 非常感謝和親切的問候 – IRHM

只需添加以下行，你標記的單擊事件處理：

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

所以你的代碼看起來像：

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

應滾動到您點擊的項目。

來源

2012-10-07 23:08:04 Nelson

嗨@納爾遜，我真的無法表達我對此的讚賞。這絕對是驚人的，我的腦海裏沉重的體重。你是最值得的賞金，當時限到期時，我會給你這個獎勵。非常感謝您所有的時間麻煩和努力。親切的問候 – IRHM

謝謝@IRHM，我很高興我可以幫助你的問題:-) – Nelson

嘗試添加一行到您的事件處理函數：

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

來源

2012-09-30 06:22:58 Marcelo

嗨@Marcelo，感謝您花時間回覆我提供的解決方案。不幸的是，儘管我已經添加了你建議的代碼。這並不能解決問題。我已經通過JavaScript控制檯運行代碼，不幸的是沒有顯示錯誤，可能指出了問題所在。非常感謝和親切的問候。 – IRHM

Autoscroll邊欄條目

回答

相關問題