我有一个小的“浮动工具箱”-一个div的位置:fixed;溢出:汽车。
工作得很好。
但是当滚动到盒子里面(用鼠标滚轮)并到达底部或顶部时，父元素“接管”“滚动请求”:工具箱后面的文档滚动。
-这是恼人的，而不是用户“要求”。
我正在使用jQuery，并认为我可以用event.stoppropagation()停止这种行为:
$(" #工具箱”)。Scroll (function(event){event.stoppropagation()});
它确实进入了函数，但传播仍然发生(文档滚动)
在SO(和谷歌)上搜索这个话题是非常困难的，所以我不得不问:
如何防止滚动事件的传播/冒泡?
编辑:
工作解决方案感谢amustill(和Brandon Aaron的鼠标轮插件在这里:
https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js
$(".ToolPage").bind('mousewheel', function(e, d)
var t = $(this);
if (d > 0 && t.scrollTop() === 0) {
e.preventDefault();
}
else {
if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
}
});
我在MooTools上搜索这个，这是第一个出现的。
最初的MooTools示例可以用于向上滚动，但不能用于向下滚动，因此我决定编写这个示例。
MooTools 1.4.5： http://jsfiddle.net/3MzFJ/
MooTools 1.3.2： http://jsfiddle.net/VhnD4/
MooTools 1.2.6： http://jsfiddle.net/xWrw4/
var stopScroll = function (e) {
var scrollTo = null;
if (e.event.type === 'mousewheel') {
scrollTo = (e.event.wheelDelta * -1);
} else if (e.event.type === 'DOMMouseScroll') {
scrollTo = 40 * e.event.detail;
}
if (scrollTo) {
e.preventDefault();
this.scrollTo(0, scrollTo + this.scrollTop);
}
return false;
};
用法:
(function)($){
window.addEvent('domready', function(){
$$('.scrollable').addEvents({
'mousewheel': stopScroll,
'DOMMouseScroll': stopScroll
});
});
})(document.id);
我在MooTools上搜索这个，这是第一个出现的。
最初的MooTools示例可以用于向上滚动，但不能用于向下滚动，因此我决定编写这个示例。
MooTools 1.4.5： http://jsfiddle.net/3MzFJ/
MooTools 1.3.2： http://jsfiddle.net/VhnD4/
MooTools 1.2.6： http://jsfiddle.net/xWrw4/
var stopScroll = function (e) {
var scrollTo = null;
if (e.event.type === 'mousewheel') {
scrollTo = (e.event.wheelDelta * -1);
} else if (e.event.type === 'DOMMouseScroll') {
scrollTo = 40 * e.event.detail;
}
if (scrollTo) {
e.preventDefault();
this.scrollTo(0, scrollTo + this.scrollTop);
}
return false;
};
用法:
(function)($){
window.addEvent('domready', function(){
$$('.scrollable').addEvents({
'mousewheel': stopScroll,
'DOMMouseScroll': stopScroll
});
});
})(document.id);
使用Brandon Aaron的Mousewheel插件，这是可能的。
这里是一个演示:http://jsbin.com/jivutakama/edit?html,js,output
$(function() {
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.bind('mousewheel', function(e, d) {
if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
e.preventDefault();
}
});
});
M.K.在他的回答中提供了一个很棒的插件。插件可以在这里找到。然而，为了完整起见，我认为把它放在AngularJS的一个答案中是一个好主意。
Start by injecting the bower or npm (whichever is preferred)
bower install jquery-scrollLock --save
npm install jquery-scroll-lock --save
Add the following directive. I am choosing to add it as an attribute
(function() {
'use strict';
angular
.module('app')
.directive('isolateScrolling', isolateScrolling);
function isolateScrolling() {
return {
restrict: 'A',
link: function(sc, elem, attrs) {
$('.scroll-container').scrollLock();
}
}
}
})();
And the important piece the plugin fails to document in their website is the HTML structure that it must follow.
<div class="scroll-container locked">
<div class="scrollable" isolate-scrolling>
... whatever ...
</div>
</div>
属性isolation -scrolling必须包含可滚动类，而且它都需要在滚动容器类或任何您选择的类中，并且锁定类必须级联。
我也遇到过类似的情况，我是这样解决的:
所有可滚动的元素使类可滚动。
$(document).on('wheel', '.scrollable', function(evt) {
var offsetTop = this.scrollTop + parseInt(evt.originalEvent.deltaY, 10);
var offsetBottom = this.scrollHeight - this.getBoundingClientRect().height - offsetTop;
if (offsetTop < 0 || offsetBottom < 0) {
evt.preventDefault();
} else {
evt.stopImmediatePropagation();
}
});
stopImmediatePropagation()确保不从可滚动的子区域滚动父可滚动区域。
下面是它的一个普通JS实现:
http://jsbin.com/lugim/2/edit?js,output
上面的方法不是那么自然，经过一些谷歌我找到了一个更好的解决方案，不需要jQuery。参见[1]和演示[2]。
var element = document.getElementById('uf-notice-ul');
var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 &&
navigator.userAgent.indexOf("WebKit") !== -1);
var isFirefox = (navigator.userAgent.indexOf("firefox") !== -1);
element.onwheel = wheelHandler; // Future browsers
element.onmousewheel = wheelHandler; // Most current browsers
if (isFirefox) {
element.scrollTop = 0;
element.addEventListener("DOMMouseScroll", wheelHandler, false);
}
// prevent from scrolling parrent elements
function wheelHandler(event) {
var e = event || window.event; // Standard or IE event object
// Extract the amount of rotation from the event object, looking
// for properties of a wheel event object, a mousewheel event object
// (in both its 2D and 1D forms), and the Firefox DOMMouseScroll event.
// Scale the deltas so that one "click" toward the screen is 30 pixels.
// If future browsers fire both "wheel" and "mousewheel" for the same
// event, we'll end up double-counting it here. Hopefully, however,
// cancelling the wheel event will prevent generation of mousewheel.
var deltaX = e.deltaX * -30 || // wheel event
e.wheelDeltaX / 4 || // mousewheel
0; // property not defined
var deltaY = e.deltaY * -30 || // wheel event
e.wheelDeltaY / 4 || // mousewheel event in Webkit
(e.wheelDeltaY === undefined && // if there is no 2D property then
e.wheelDelta / 4) || // use the 1D wheel property
e.detail * -10 || // Firefox DOMMouseScroll event
0; // property not defined
// Most browsers generate one event with delta 120 per mousewheel click.
// On Macs, however, the mousewheels seem to be velocity-sensitive and
// the delta values are often larger multiples of 120, at
// least with the Apple Mouse. Use browser-testing to defeat this.
if (isMacWebkit) {
deltaX /= 30;
deltaY /= 30;
}
e.currentTarget.scrollTop -= deltaY;
// If we ever get a mousewheel or wheel event in (a future version of)
// Firefox, then we don't need DOMMouseScroll anymore.
if (isFirefox && e.type !== "DOMMouseScroll") {
element.removeEventListener("DOMMouseScroll", wheelHandler, false);
}
// Don't let this event bubble. Prevent any default action.
// This stops the browser from using the mousewheel event to scroll
// the document. Hopefully calling preventDefault() on a wheel event
// will also prevent the generation of a mousewheel event for the
// same rotation.
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true; // IE events
e.returnValue = false; // IE events
return false;
}
[1] https://dimakuzmich.wordpress.com/2013/07/16/prevent-scrolling-of-parent-element-with-javascript/
[2] http://jsfiddle.net/dima_k/5mPkB/1/
