0

I want to disable scroll-bar dragging while keeping all other means of capturing scroll events enabled.

A means of capturing a mousedown event on the scrollbar would also suffice (most text on that topic points to not possible). I do not want to use any external libraries to solve the issue. Any other means of coming to a solution to the problem described below are welcome.

The solution only has to work in current versions of 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{

        }
    }

Background Some really quick background information. I have several million data points with a large set of data for each point.

I load 200 data points into the html, into a table/tr/td set-up. I cache 400 data points into a javascript array of objects (roughly 100 above and below at any given point in time).

When the user scrolls down, if the edge of the datapoints being displayed comes near the edge of the cached data points, more points are loaded into the cache from the harddrive (via html5 file-system api). Depending on how far down the scroll event attributes state were scrolled defines how many data points are removed from the opposing end of the table and new data points are loaded into the target edge of the table. after handling the scroll event I then scroll to either 25% of the height of the table or 75% of the table.

The Problem I am running into is the scroll event appears to be fired differently with scrollbar drags than with other means of scroll events. I am capturing a scroll-bar drag event as a scroll event, but if I drag the scrollbar all the way to the bottom (my code works if I do not drag it all the way down), it'll sometimes appear to somehow overwrite my javascript code to scroll back up - thus resulting in an inability to scroll down farther and fire off anymore scroll events.

I have no issues with scroll events captured from:

  • mouse wheel move
  • mouse clicks on the up/down arrows
  • mouse clicks on the upper/lower region relative to the scrollbar
  • mouse downs on the upper/lower regions relative to the scrollbar.
  • mouse downs on the up/down arrow buttons
  • key down on keyboard up/down arrows
4

1 回答 1

0

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

鼠标悬停滚动条拇指代码

我向几个元素添加了 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
下面的代码几乎与上面的代码相同

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

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);
于 2013-12-20T16:14:17.093 回答