我有一个带右侧滑动面板的html页面。此面板宽200像素,位置:固定,其位置初始设置为右:-100px(在clientArea之外的一半)。对于body,html(css),Overflow-x设置为hidden,并且面板接受mouseover事件和drop事件。鼠标悬停时,面板向右滑动:0。
如果我在此面板上拖动一个可拖动元素,则面板正确地向左滑动,但窗口开始向右滚动,这是一种不受欢迎的行为。
我还尝试了如下所述的javascript解决方案:Disable horizontal scroll with JavaScript 但这是一个糟糕的解决方法,因为它使clientArea开始闪烁。
完全禁用水平滚动的最佳方法是什么?可能是跨浏览器解决方案。
由于
更新
这不是引起问题的滑动面板,而是可拖动元素的辅助对象(我使用的是jquery-ui),它在拖动时锚定在左上角的鼠标位置。想象一下辅助对象为div 200x100px。当拖动到窗口区域的最右边时,问题显示向右滚动窗口,而不是剪切帮助器(而不是滚动窗口)。我通过在拖动操作期间将鼠标锚定到帮助器的右上角来管理这个,但是我仍然很好奇是否有任何方法可以完全禁用窗口的水平滚动。我认为辅助对象与页面流完全“分离”(就像在css中使用position:absolute一样),但显然它不是。
答案 0 :(得分:0)
我最终改变了我的初始要求,从而改变了页面设计。
答案 1 :(得分:-1)
如果你不把面板放在右边怎么办:-100px,但是给它宽100px并把它放在右边:0px?
然后在mouseover上将宽度设置为200px。它仍然像一张幻灯片。我不知道你的面板内容是否允许更改宽度,但也许你可以让面板溢出:隐藏。