锁定鼠标滚轮以聚焦div [英] lock mousewheel scroll to focus div

问题描述

我的网站上有一个侧栏，偶尔需要滚动。这是一个不愉快的用户体验，当用鼠标滚轮将边栏滚动到底部后，主窗口开始滚动。

我想确保主窗口当鼠标滚轮悬停在我的边栏上时，不会滚动鼠标滚轮，但最好只在侧边栏本身显示滚动条时使用。

我可能想避免使用的JavaScript滚动条，因为它们似乎经常不如默认值（laggier，等待其他js代码等），尽管它看起来像这个解决方案可能需要它们。

:
下面是我最终使用的代码，我从我接受的答案中找到的第一个链接的简单改编。

 （function（$）{
 $ .fn.hasScrollBar = function（）{
 return this.get（0）.scrollHeight> this.height（）; 
} 
}）（jQuery）; 
 
 / **这是高级功能。 
 *它必须对三角洲多/少于零起反应。 
 * / 
函数句柄（delta）{
 slider = $（'＃wl-slider'）; 
 
 if（slider.hasScrollBar（））{
 if（delta> 0&< slider.scrollTop（）== 0&&< slider.hasClass（'scroll- hover'））{
 event.preventDefault（）; 
 event.returnValue = false; 
} 
 else if（delta <0&&;（slider.get（0）.scrollHeight  -  slider.scrollTop（）== slider.outerHeight（））&&< slider.hasClass （'scroll-hover'））{
 event.preventDefault（）; 
 event.returnValue = false; 
} 
 
} 
} 
 
 
 
 / **鼠标滚轮事件的事件处理程序。 
 * / 
函数轮（事件）{
 
 var delta = 0; 
 if（！event）/ *对于IE。 * / 
 event = window.event; 
 if（event.wheelDelta）{/ * IE / Opera。 * / 
 delta = event.wheelDelta / 120; 
} else if（event.detail）{/ ** Mozilla case。 * / 
 / **在Mozilla中，delta的标志与IE中的标志不同。 
 *另外，delta是3的倍数。
 * / 
 delta = -event.detail / 3; 
} 
 / **如果增量不为零，则处理它。 
 *基本上，如果滚轮向上滚动，delta现在为正值，
 *为负值，如果滚轮向下滚动，delta则为负值。 
 * / 
 if（delta）
句柄（增量）; 
 
} 
 
 / **初始化代码。 
 *如果您使用自己的事件管理代码，请根据需要进行更改。 （$（'＃user-level'）。size（）！= 0）
 {
 if（window.addEventListener）
 / * * DOMMouseScroll适用于Mozilla。 * / 
 window.addEventListener（'DOMMouseScroll'，wheel，false）; 
 / ** IE / Opera。 * / 
 window.onmousewheel = document.onmousewheel = wheel; 
} 
  

解决方案

我猜你不会有足够的标准事件处理程序，例如在jquery中，你需要直接处理鼠标滚轮 - 我只是搜索这些资源：

• http://www.adomas.org/javascript-mouse-wheel/


• < a href =http://www.javascriptkit.com/javatutors/onmousewheel.shtml =nofollow> http://www.javascriptkit.com/javatutors/onmousewheel.shtml





然后直接查看侧边栏是否已经在底部/顶部滚动，如果是，请过滤滚动事件。




I have a sidebar on my site that occasionally needs to be scrolled. It's an unpleasant user experience when, after scrolling the sidebar to the bottom with the mousewheel, the main window begins to scroll.

I'd like to make sure the main window does not scroll with the mouse wheel when the mouse wheel is over my sidebar, though preferably only when my sidebar itself is showing scrollbars.

I'd probably like to avoid use of javascript scroll bars as they seem to often not perform as well as the defaults (laggier, wait on other js code, etc), though it looks like this solution may require them.

Thanks!

EDIT:: Here's the code I ended up using, a simple adaptation of what I found in the first link from my accepted answer.

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
    slider = $('#wl-slider');

    if(slider.hasScrollBar()){
        if (delta > 0 && slider.scrollTop() == 0 && slider.hasClass('scroll-hover')){
            event.preventDefault();
            event.returnValue = false;
        }
        else if (delta < 0 && (slider.get(0).scrollHeight - slider.scrollTop() == slider.outerHeight()) && slider.hasClass('scroll-hover')){
            event.preventDefault();
            event.returnValue = false;
        }

    }
}



/** Event handler for mouse wheel event.
 */
function wheel(event){

        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);

}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if($('#user-level').size() != 0)
{
  if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
  /** IE/Opera. */
  window.onmousewheel = document.onmousewheel = wheel;
}

解决方案

I guess you won't suffice with standard event handlers e.g. in jquery and you need to handle directly the mouse wheel - I just googled these resources:

• http://www.adomas.org/javascript-mouse-wheel/
• http://www.javascriptkit.com/javatutors/onmousewheel.shtml

And then look directly if the sidebar is already scrolled at the bottom/top and if yes, filter out the scroll event.

这篇关于锁定鼠标滚轮以聚焦div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！