Question

I wonder whether someone may be able to help me please.

The code below is a section of my web page which creates a sidebar for a Google map.

// == rebuilds the sidebar to match the markers currently displayed == 
function makeSidebar() {
  var html = "";
  for (var i = 0; i < gmarkers.length; i++) {
    if (gmarkers[i].getVisible()) {
      html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + " - " + gmarkers[i].mydescription + '<\/a><br>';
    }
  }
  document.getElementById("sidebar").innerHTML = html;
}

The problem I have is that as the list of map marker grows its becoming increasingly difficult to scroll the page to see all the entries.

What I’d like to be able to do is create a vertical scroll bar which will allow easier navigation. I’ve done some reading on this, and I think I’m correct in saying that if this was in a div I could use the overflow?. but I’m not sure how to replicate when using Javascript.

I just wondered whether someone could perhaps take a look at this please and offer some guidance on how I could go about this.

Many thanks and Kind regards

Answer 1

To allow a div to be scrolled, simple add the css property overflow with the value of scroll – you will need to provide the height attribute too

example here

If your sidebar element was a div you could just apply the following :

#sidebar {
   overflow: scroll;
   height: 400px;
   width: 100px;
}

You would need to change the height and width values as you require ….

A value of scroll means :

The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

Docs for the overflow property here