禁用滚动条拇指拖动事件，保持所有其他滚动事件启用 - javascript、html

Question

我想禁用滚动条拖动，同时启用所有其他捕获滚动事件的方法。

在滚动条上捕获 mousedown 事件的方法也足够了（关于该主题的大多数文本都指向不可能）。我不想使用任何外部库来解决这个问题。欢迎任何其他方法来解决下面描述的问题。

该解决方案仅适用于当前版本的 Google Chrome。

    document.getElementById('mainTable').parentNode.addEventListener("scroll",function(e){
        ...

        //Other code logic and syntax omitted

        ...
        //Logic for deriving if scrolling up or down is accomplished by comparing
        //the previously recorded .scrollTop value to the current value of the div 
        //containing the table 'mainTable' of datapoints
        if(scrollDownEvent){
           document.getElementById("mainTable").parentNode.scrollTo(0,.75*totHeight);
        }else if(scrollUpEvent){
           document.getElementById("mainTable").parentNode.scrollTo(0,.25*totHeight);
        }else{

        }
    }

背景 一些非常快速的背景信息。我有几百万个数据点，每个点都有大量数据。

我将 200 个数据点加载到 html 中，加载到 table/tr/td 设置中。我将 400 个数据点缓存到一个 javascript 对象数组中（在任何给定时间点上下大约 100 个）。

当用户向下滚动时，如果正在显示的数据点的边缘靠近缓存数据点的边缘，则会将更多点从硬盘加载到缓存中（通过 html5 文件系统 api）。根据滚动事件属性状态向下滚动的距离，定义了从表格的另一端删除了多少数据点，并将新的数据点加载到表格的目标边缘。处理完滚动事件后，我滚动到表格高度的 25% 或表格的 75%。

问题我遇到的问题是滚动条拖动触发的滚动事件似乎与其他滚动事件方式不同。我正在将滚动条拖动事件捕获为滚动事件，但是如果我将滚动条一直拖到底部（如果我不一直向下拖动，我的代码可以工作），它有时会以某种方式覆盖我的 javascript 代码向上滚动 - 从而导致无法向下滚动并触发更多滚动事件。

我对从以下位置捕获的滚动事件没有任何问题：

• 鼠标滚轮移动
• 鼠标点击上/下箭头
• 鼠标点击相对于滚动条的上/下区域
• 相对于滚动条的上/下区域的鼠标按下。
• 鼠标按下向上/向下箭头按钮
• 键盘上/下箭头键向下

Answer 1

我最终没有制作自己的滚动条，也没有使用任何外部滚动条库。我通过计算滚动条拇指的位置并跟踪鼠标位置、处理导致滚动条锁定的滚动条的上限/下限来解决了这个问题。

鼠标悬停滚动条拇指代码

我为几个元素添加了 mousemove 事件。我计算了滚动条的物理位置和宽度。当鼠标在这些位置移动时，我适当地处理了鼠标悬停事件。我还可以通过查看 mainTable 的父级高度并将其与 mainTable 的高度进行比较来计算拇指本身的高度。我可以通过查看 scrollTop 来计算拇指的位置。

document.getElementById("mainTable").parentNode.addEventListener("mousemove", function(e){
    var mainTab = document.getElementById("mainTable");
    if(mainTab.offsetWidth <= e.offsetX){
        var scrollbarHeight = mainTab.parentNode.offsetHeight - 36; //36 =height of up and down arrows
        var scrollbarThumbHeight = (scrollbarHeight/mainTab.offsetHeight)*scrollbarHeight;
        var childScrollTop = mainTab.parentNode.scrollTop
        var relativeThumbPosition = (childScrollTop/mainTab.offsetHeight) + 18; // 18=height of up arrow
        if(e.offsetY >= relativeThumbPosition && e.offsetY <= relativeThumbPosition+scrollbarThumbHeight){
            console.log("mouse-move thumbar:\t" + e.which);
            //execute specific mouse over code here
        }else{
            //execute any non-mouse over specific code here
        }
    }
})

以下方法最终解决了我的问题

滚动条拇指卡在底部或顶部 - 处理
这是在文档正文上的 mousemove 事件侦听器中

可能有更好的方法来做到这一点，例如添加和删除事件侦听器（仅在需要时才这样做）但是，我添加了侦听器并始终检查 - 将来我可能会再次修改这样效率更高。我检查滚动位置是锁定在滚动条轨道的顶部还是底部。如果是，我会适当地处理无限滚动条。

var mainTab = document.getElementById("mainTable");
if(mainTab.parentNode.scrollTop == 0){
    if(cnTable.buffStart != 0){
        upEvent(27);
    }else if (cnTable.tableStart != 0){
        upEvent(27);
    }
}else if(mainTab.parentNode.scrollTop + mainTab.parentNode.offsetHeight >= totHeight ){
    if(cnTable.buffStop < cnDAO.currentIndexes.length -1){
        downEvent(27);
    }else if (cnTable.tableStop < cnTable.buffer.length-1){
        downEvent(27);
    }
}

最后，在upEvent 和downEvent 中找到用于设置滚动位置的代码
下面的代码与上面的代码几乎相同

如上所述，我处理了位置，以下代码是我用来更改位置的代码，还有很多代码用于计算位置，但我决定只显示一般情况（不是我的全部行的高度都相同，所以我必须在 up 和 down 事件中未显示的代码中进行适当调整）

var totHeight = document.getElementById("mainTable").offsetHeight -1;
document.getElementById("mainTable").parentNode.scrollTo(0,.24*totHeight);

与

var totHeight = document.getElementById("mainTable").offsetHeight -1;
document.getElementById("mainTable").parentNode.scrollTo(0,.76*totHeight);