使用主浏览器滚动条滚动内部元素

我有一个内部元素，它具有固定的高度和宽度并且有overflow-y: scroll;集。使用主浏览器滚动条滚动内部元素

我想使用主浏览器滚动条首先滚动内部元素的内容，然后在到达内部元素内容的底部后继续滚动页面的其余部分。

有什么办法可以在jQuery或JavaScript中做到这一点？

来源

2015-02-24 Kai

jQuery是一个Javascript库，没错，它可能的，但你需要首先尝试一些东西，解释什么具体的问题你有你的代码 – andrew 2015-02-24 01:35:18

有没有办法在JavaScript中做到这一点！？天空是极限！虽然它可能不是你正在寻找的。不幸的是，你不能劫持“滚动”事件 - 它是不可取消的。

但是，您可以通过鼠标滚轮拦截滚动 - 这是大多数人滚动的方式。另一种选择是创建自己的滚动条库...但这非常费时。

（我已经这么做了，顺便说一下，你可以自由地使用它，并与它鬼混：http://code.fashionablydrab.com/fsb/但是，就像5年前，所以如果你有超过一个什么样的范围的任何问题请参阅操作指南部分，这是您自己的。）

无论如何，回到ol'“mousewheel”事件。你猜怎么了？它不是标准化的！所以每个浏览器都有自己的做法。 Firefox已经发布了具有deltaX和deltaY属性的新“轮子”事件，并且他们同意Chrome/IE的“鼠标滚轮”事件的deltaX和deltaY，因此您不必处理整个“细节”问题。

这里有一个小提琴：http://jsfiddle.net/bhn58xzx/1/

var scrollInfo = { 
    element: document.querySelector("#scroll") 
}; 

var wheelEvent = document.onmousewheel !== undefined ? "mousewheel" : "wheel"; 

function interceptWheel(e) { 
    if (e.currentTarget === scrollInfo.element) { 
     return; 
    } 
    var st = scrollInfo.element.scrollTop, 
     inc = e.deltaY; 

    if (e.type === "wheel") { 
     inc *= 100; 
    } 

    scrollInfo.element.scrollTop += inc 

    if (st !== scrollInfo.element.scrollTop) { 
     e.preventDefault(); 
    } 

    document.querySelector("#out").innerHTML = e.deltaY; 
}; 

document.body.addEventListener(wheelEvent, interceptWheel, false);

注意，它向上和向下滚动时的作品（容易改变的，只是检测是否e.deltaY为正/负修改scrollTop的前）。

如果支持旧的浏览器是必要的你，那么我祝你一切顺利;）

来源

2015-02-24 03:27:11 DRAB

真棒的东西哥们，完美！非常感谢，非常感谢。我花了几个小时在网上搜索解决方案，尝试使用所有不同的搜索短语来描述我正在尝试做什么 - 您是一个传奇！ – Kai 2015-02-24 06:30:59

使用主浏览器滚动条滚动内部元素

回答

相关问题