如何在信息窗口谷歌地图上添加 jquery slimScroll答案

【问题标题】：How to add jquery slimScroll on infowindow google maps如何在信息窗口谷歌地图上添加 jquery slimScroll
【发布时间】：2023-03-10 12:46:01
【问题描述】：

这是我的脚本：

// InfoWindow content
var content = '<div id="iw-container">' +
             '<div class="iw-title">Porcelain Factory of Vista Alegre</div>' +
                    '<div class="iw-content">' +
                      '<div class="iw-subTitle">History</div>' +
                      '<img src="images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">' +
                      '<p>Founded in 1824, the Porcelain Factory of Vista Alegre was the first industrial unit dedicated to porcelain production in Portugal. For the foundation and success of this risky industrial development was crucial the spirit of persistence of its founder, José Ferreira Pinto Basto. Leading figure in Portuguese society of the nineteenth century farm owner, daring dealer, wisely incorporated the liberal ideas of the century, having become "the first example of free enterprise" in Portugal.</p>' +
                      '<div class="iw-subTitle">Contacts</div>' +
                      '<p>VISTA ALEGRE ATLANTIS, SA<br>3830-292 Ílhavo - Portugal<br>'+
                      '<br>Phone. +351 234 320 600<br>e-mail: geral@vaa.pt<br>www: www.myvistaalegre.com</p>'+
                    '</div>' +
                    '<div class="iw-bottom-gradient"></div>' +
                  '</div>';
// A new Info Window is created and set content
var infowindow = new google.maps.InfoWindow({
    content: content
});
...
google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
});

这是我的 slimScroll 脚本 (http://rocha.la/jQuery-slimScroll)

$(function(){
    $('#iw-container').slimScroll({
        allowPageScroll: true, 
        height: '100px',
        disableFadeOut: true
     });
});

结果不行，怎么解决？

【问题讨论】：

看起来您可能希望将细长滚动条放在 .iw-content 上，因为那是滚动的部分，而不是容器。

标签： jquery google-maps slimscroll

【解决方案1】：

至少该插件在寻找新元素时有超时（看起来没有），当 infowindow html 附加到 DOM 时，您将不得不调用该插件。

另外，正如@Starscream1984 所说，请注意您选择的元素。

See a working example (jsfiddle).

google.maps.event.addListener(infowindow, 'domready', function(){
    $('.target_element').slimScroll({
        allowPageScroll: true, 
        height: '50px',
        disableFadeOut: true
    });
});

【讨论】：