我的网站上有一个侧边栏,偶尔需要滚动。当使用鼠标滚轮将侧边栏滚动到底部后,主窗口开始滚动,这是一种令人不快的用户体验。
当鼠标滚轮在我的侧边栏上时,我想确保主窗口不会滚动鼠标滚轮,但最好只在我的侧边栏本身显示滚动条时。
我可能想避免使用javascript滚动条,因为它们似乎经常表现不如默认值(laggier,等待其他js代码等),尽管看起来这个解决方案可能需要它们。 / p>
谢谢!
EDIT :: 这是我最终使用的代码,简单地改编了我在接受的答案的第一个链接中找到的内容。
(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;
}
答案 0 :(得分:2)
我想你用标准的事件处理程序是不够的,例如在jquery中你需要直接处理鼠标滚轮 - 我只是用Google搜索这些资源:
然后直接查看侧边栏是否已经在底部/顶部滚动,如果是,则过滤掉滚动事件。