当鼠标光标移出滚动条线时，滚动条会自动转到顶部

Question

我正在尝试根据Leaflet的Layer Control代码的属性创建Leaflet菜单。 如果菜单大于菜单顶部和地图底部之间的空间，则此菜单将自动滚动。

使用Javascript：

    var acceptableHeight = this._map._size.y - (this._container.offsetTop + 60);

    if (this._form.clientHeight > acceptableHeight) {
        this._form.style.height = acceptableHeight + 'px';
        L.DomUtil.addClass(this._form, 'menu-scrollbar');
    }
    else {
        L.DomUtil.removeClass(this._form, 'menu-scrollbar');
    }

CSS：

    .menu-scrollbar {
        overflow-y: auto;
        padding-right: 10px;
    }

根据表单的大小完美地创建滚动条，但当鼠标光标离开滚动条区域（即条形跟随的行）时，它总是移动到顶部。还有一点奇怪的是，只有当鼠标快速更改其光标类型时（例如，当位于HTML输入区域时），该栏才会停留在同一位置。

图像可能比长解释更好： screenshot of the menu.

我一直在寻找滚动条的类似问题：

1. "Why the vertical scroll bar moves automatically?"
2. "Scroll bar goes up"

但答案与同一问题并不完全相关，我想使用纯JavaScript而不是将其与jQuery混合使用。其中一个可行的解决方案是获取滚动条位置（how to get it）并手动设置（how to do it）。

但我确信这个问题来自于我没有得到的其他东西。 有人可以帮我这个吗？

小提琴示例： http://jsfiddle.net/LnzN2/1121/

提前谢谢。