通过拖动鼠标光标防止滚动

Question

我在div中有一个可以水平滚动的列表。一切都很好，除了用户可以使用鼠标光标垂直拖动列表，取代内容。

以下是一个例子：http://jsfiddle.net/xy9mnbr2/。尽管将overflow-y设置为hidden并且无论如何都应该没有额外空间，否则将光标向下拖动到黄色空间会导致布局中断。

HTML：

<div id="scrollable-list-outer">
<ul id="scrollable-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

CSS：

ul#scrollable-list {
    margin:0;
    float: left;
    right: 0;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    position: relative;
    height: 100%;
    margin-top: 200px;
}
ul#scrollable-list li {
    padding: 5%;
}
#scrollable-list-outer {
    margin: 5% 10% 0 10%;
    width: 80%;
    height: 200px;
    float: right;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 10px;
    background: lightyellow;
}
#scrollable-line {
    width: 80%;
    height: 1px;
    background: #ccc;
    margin: 10px 10% 0 10%;
    float: left;
}
ul#reach-list li {
}