完全禁用水平滚动，同样在放置事件中

Question

我得到了一个带有滑动面板的html页面。该面板宽200px，位置：固定，其位置初始设置为右：-100px（位于clientArea的外侧）。对于body，html（css），Overflow-x被设置为隐藏，并且面板接受鼠标悬停事件和放置事件。在鼠标悬停时，面板向右滑动：0.

如果在此面板上拖动可拖动元素，面板将正确滑动到左侧，但窗口开始向右滚动，这是一种不需要的行为。

我也尝试过一个javascript解决方案，如下所述：Disable horizontal scroll with JavaScript 但是这是一个糟糕的解决方法，因为它使clientArea开始闪烁。

什么是完全禁用水平滚动的最佳方法？可能是一个跨浏览器解决方案。

感谢

更新：

这不是滑动面板造成的问题，而是拖动元素的辅助对象（我使用jQuery UI的），它是固定在鼠标拖动时位于左上方。将帮助器对象想象为div 200x100px。当拖动到窗口区域的最右侧部分时，问题显示为向右滚动窗口，而不是剪裁帮助器（并且不滚动窗口）。我通过在拖动操作期间将鼠标锚定到帮助器的右上角来进行管理，但我仍然好奇是否有任何方法可以完全禁用窗口的水平滚动。我认为辅助对象与页面流完全“分离”（就像在css中使用position：absolute一样），但显然不是。

Answer 1

我最终改变了我的初始需求，从而改变了页面设计。

Answer 2

如果你不把面板放在正确的位置：-100px，但给它一个100px的宽度并将它放在正确的位置：0px？

然后在鼠标悬停上将宽度设置为200px。它仍然感觉像一个幻灯片。我不知道你的面板的内容是否允许改变宽度，但也许你可以给面板一个溢出：也是隐藏的。