使用 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;
};