标签: mousewheel

我有一个内部<div id="content">元素的页面布局,其中包含页面上的重要内容.设计的重要部分是:

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

现在当包含文本大于300px时,我需要能够滚动它.是否可以滚动<div>,即使鼠标没有悬停元素(箭头键也应该工作)？

请注意,我不想禁用"全局"滚动:页面上应该有两个滚动条,全局滚动条和滚动条<div>.

唯一改变的是内部<div>应该总是滚动,除非它不能再移动(在这种情况下页面应该开始滚动).

这可能以某种方式实现吗？

编辑

我认为问题有点令人困惑,所以我会附加一系列我希望它能够工作的方法.(Khez已经提供了概念验证.)

第一个图像是打开时页面的外观.

现在,鼠标位于指示的位置并滚动,应该发生的是

• 首先内部div滚动其内容(图2)
• 内部div已完成滚动(图3)
• body元素滚动,以便div本身移动.(图4)

希望现在有点清楚.

(图片感谢gomockingbird.com)

我想用mousewheel jquery插件滚动div的内容.我有这个,但它不起作用.有什么想法吗？

$(function() {
$('#contentBox').bind('mousewheel', function(event, delta) {
   if (delta > 0) {
        $('#contentBox').css('top', parseInt($('#contentBox').css('top'))+40);
    } else {
        $('#contentBox').css('top', parseInt($('#contentBox').css('top'))-40);
    }
  return false;
}); 
}); 

在我的C#3.5 Windows窗体应用程序中,我有一些SplitContainers.每个内部都有一个列表控件(dock fill).当焦点位于其中一个控件上并移动鼠标滚轮时,滚动显示现在聚焦的列表.

我的任务是滚动列表,该列表当前是鼠标悬停的,而不是选中的列表.是否可以在Windows窗体中？如果没有,是否可以使用PInvoke？

当我单击文档时,此代码禁用鼠标滚动功能.

$(document).on("click", function () {
    window.onmousewheel = function (e) {
        e.preventDefault();
    }
});

但是,这适用于除Firefox以外的所有浏览器.请告诉我,如何将此代码作为跨浏览器？

我有一个固定高度的div,里面有一个ul-list和很多li-items.我向div应用了一个jScrollPane,我想为其自定义滚动条的外观.我的代码是这样的:

$(function() {
    $('.myDiv').jScrollPane( { showArrows: true, arrowScrollOnHover: true, wheelSpeed: 120 });
});

作为jScrollPane我使用http://jscrollpane.kelvinluck.com的脚本,它有点工作.但是鼠标滚轮的速度(滚动速度)太慢了,尽管我试图设置速度,正如你在上面的例子中看到的那样.

有没有人有同样的效果,可以给我一个暗示我如何加快它的速度？

如何检查没有滚动条的鼠标滚轮运动？

$(document).mousewheel(function() {
     clicker.html("a7a");
});

我正在使用mac触控板.如何防止页面返回和在水平滚动上访问过的页面旁边？

我试图阻止车轮事件,但它在大多数情况下都不起作用.

container.addEventListener('wheel', function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    return false;
}, {passive: false, capture: true});

即使我尝试阻止鼠标滚轮事件,这也导致页面导航.

虽然Flash有一个鼠标滚轮事件(MouseEvent.MOUSE_WHEEL),但它有很多问题.

首先,Mac上尚不支持该事件.所以有一堆解决方案,所有这些(基本上)都在javascript中捕获mousewheel(或DOMMouseScroll)事件并将其传递给flash应用程序.幸运的是,在我测试过的所有Mac浏览器中,当闪光灯处于全屏模式时,这也适用.

问题2是flash忽略具有小"增量"的鼠标滚轮事件.例如,Microsoft的IntelliPoint Mice带有"Smooth Scroll"会导致此问题.解决方案与mac的解决方案相同...即在浏览器中捕获javascript鼠标滚轮事件并将其传递给应用程序.问题是我测试的Windows浏览器(firefox,即safari和chrome),当闪存处于全屏模式时,它们似乎无法捕获此事件.有谁知道为什么或如何解决这个问题？

我目前有一个混合解决方案,总是从javascript(非全屏或全屏模式)中获取事件,除非它在Windows上处于全屏模式(此时它从闪光鼠标轮事件中获取它们).所以它失败的唯一时间是Windows上的全屏模式,鼠标具有小的增量.有人有完整的解决方案？还是只是一个更好的？

当组合框或列表框等控件具有焦点时,是否有人知道禁用鼠标滚轮的方法？为了我的目的,组合框就是我需要的答案.

我有一个组合框设置为在SelectedIndexChanged上触发SQL查询,并且在组合框具有焦点时意外滚动滚轮导致大约六个SQL查询同时触发.

我正在使用OpenLayers在我的网站上显示自定义OSM地图.

我有一点要尊重:地图必须修复(意味着我们无法拖动或缩放它).

我有缩放问题,我无法用鼠标禁用缩放.有人有小费吗？

map = new OpenLayers.Map('map');
map.events.remove("move");
map.events.remove("movestart");
map.events.remove("moveend");
map.events.remove("zoomend");
map.events.remove("mouseover");
map.events.remove("mouseout");
map.events.remove("mousemove");
map.events.remove("zoomstart");
var nav = new OpenLayers.Control.Navigation({
  defaultDblClick: function(event) { return ; }
});
map[index].addControl(nav);

此外,如果有人提示删除所有导航事件比这更容易,将不胜感激.