2

I would like to make the entire gadgetContent div of my Sidebar Gadget scrollable if its content overflows its height. I can get a scrollbar to show up. Unfortunately, any time I click+drag this bar, I move the entire gadget. Here's my CSS:

div#gadgetContent {
  overflow: auto;
  height: 240px;
}

Is there a way to get the scrollbar's behavior to override the Gadget's click+drag movement?

Thanks in advance!

edit: I discovered that HTML scrollbars actually do work within Sidebar gadgets. I had some CSS in my g:background element that was preventing scrollbars from being clickable. HTML scrollbars started working the way I expected them to once I fixed the problem.

AndreiM
  • 4,558
  • 4
  • 36
  • 50

1 Answers1

1

You can set an empty onclick handler for the div, but then dragging will be prevented for the entire content of the element, not just the scrollbars.

The best approach is to create your own scrollbars or use an existing library out there (this one, for example). This way, you can apply the appropriate event handlers to the scrollbar controls which will automatically prevent dragging when they are clicked.

Andy E
  • 338,112
  • 86
  • 474
  • 445