How to make page of jQuery UI axis:x horizontally draggable list scrollable

How to make page of jQuery UI axis:x horizontally draggable list scrollable

So below is a diagram that describes what my site looks like.

Each list item is horizontally draggable, which works fine, but on multi-touch it is hard to scroll because only the body ( the white area in the diagram ) can trigger scrolling.

Although the list items are horizontally draggable, when you move a finger down on the list-items, it interprets that as a horizontal drag because rarely are those vertical flicks 100% straight.

I am using jQuery UI for the draggable interaction.

How can I make this page vertically scrollable from anywhere on the page like a static page on a multi-touch device is?