使用 vanilla javascript 計算滾動 Position

Question

包裝器在 x 方向上溢出，因此它具有水平滾動，並且 table inside.body 在 y 方向上溢出，因此它具有垂直滾動。 標記如下所示。

 <div class="container"> <div class="wrapper"> <div class="head"> <table>...</table> </div> <div class="body"> <table>...</table> </div> </div> </div>

我刪除了默認瀏覽器滾動條並創建了自定義scrollbars 。 為容器元素創建自定義滾動條。 當 wrapper 水平滾動時，容器的x-scrollbar滾動，當 body 內的 table 垂直滾動時，容器的 y-scrollbar 滾動。

問題出在垂直滾動條上。 當我單擊並拖動垂直滾動條的拇指時，我必須更新 body 內表格的scrollTop 。 我發現很難找出正確的計算來更新scrollTop 。？ 有人幫我解決這個問題。

我已經為 y-scrollbar 的拇指設置了mousedown 、 mousemove和mouseup偵聽器來計算拖動的距離量，但是我如何計算 body 內表格的scrollTop相對於在y-scrollbar中拖動的距離量y-scrollbar ？

Answer 1

我想出了正確的計算。

var elem = document.querySelector('.body table'); // Content to be scrolled.
var yTrack = document.querySelector('.track.y'); // scroll-track-y
var yBar = yTrack.querySelector('.bar'); // scroll-thumb-y

在mousedown事件中，我將初始值設置為 object。 在mousemove事件中，我正在更新要滾動的元素的scrollTop 。 然后在mouseup事件中，我將 object 設置為 null。

function yBar_OnMouseDown(e)
{
    initCoords = {
        axis: 'y',
        abs: e.pageY,
        bar: yBar,
        p0: yBar.offsetTop
    };
};

function yBar_OnMouseMove(e)
{
    if (initCoords && initCoords.axis === 'y')
    {
        var maxElemScroll = elem.scrollHeight - elem.clientHeight;
        var room = yTrack.scrollHeight - yBar.clientHeight;
        var diff = e.pageY - initCoords.abs;
        var abs = initCoords.p0 + diff;
        var maxTrackScroll = yTrack.offsetHeight - yBar.offsetHeight;

        abs = abs < 0 ? 0 : maxTrackScroll < abs ? maxTrackScroll : abs;
        elem.scrollTop = maxElemScroll * abs / room;
    }
};

function yBar_OnMouseUp(e)
{
    initCoords = null;
};