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

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

下面是一个例子：。将光标向下拖动到黄色空间会导致布局中断，尽管

overflow-y

设置为

hidden

，并且无论如何都不应该有额外的空间

HTML:

---

这种行为在Firefox中是不可复制的。使用chrome时，可以在黄色区域使用鼠标滚轮滚动；当你仍然处于滚动模式并离开该区域时，整个chrome选项卡变得不可用，FF似乎没有问题，只有chrome和Safari。不确定是不是要付帐？它在FF中对我很有效@尼科特里：太好了，非常感谢@NicoO

<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>

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 {
}