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

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

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

该解决方案只需在当前版本的谷歌浏览器上运行即可

    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中，加载到表/tr/td设置中。我将400个数据点缓存到一个javascript对象数组中（在任何给定时间点上下大约100个）

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

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

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

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

---

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

将鼠标悬停在滚动条拇指代码上

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

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
        }
    }
})

最后，在

upEvent

和

downEvent

中设置滚动位置的代码
下面的代码与上面讨论的代码几乎相同

如上所述，我处理了位置，下面的代码是我用来更改位置的代码，有更多的代码用于计算位置，但我决定只显示一般情况（并非我所有的行都具有相同的高度，因此我必须在上下事件中未显示的代码中进行适当调整）

及

---

我建议你自己做一个卷轴，看起来这可能是我最好的选择，谢谢你的推荐。

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);
    }
}

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);