javascriptjquerygoogle-maps-api-3infowindowcustom-scrolling

How to apply a custom scrollbar to Google Maps infowindow

I have an infowindow that uses a vertical scrollbar when the content does not fit in the window. I would like to apply the jquery custom scrollbar to the infowindow with the thin rounded scrollbar (I think it is the default-skin).

See the fiddle here. I have added all the necessary code, but the default scrollbar is still shown.

Loading:

$(document).ready(function () {
    $(".mapInfoWindow").customScrollbar();
});

Adding the skin:

content: '<div class="mapInfoWindow modern-skin">'...

CSS:

.mapInfoWindow {
    max-height: 100px;
}

EDIT: After the answer below, the scrollbar is now cut off at the bottom, see the image below as requested:

enter image description here

Solution

  • You can use setInterval for calling customScrollbar and link jQuery Custom Scrollbar css file to your project.

    setTimeout(
    function()
    {
     $(".mapInfoWindow").customScrollbar();
    }, 3000
);

    Link