如何获得滚动条缩略图的正确位置？

Question

我正在尝试检测滚动条拇指的正确位置。如果可能的话，有人可以解释一下吗？滚动条缩略图没有固定宽度。我正在使用 nw.js、ES6 和 jQuery 库。

以下是我的代码的简化提取。

class C {
    constructor() {
        win.on('resize', this._resize.bind(this));
        $('#divId').on('scroll', this._scroll.bind(this));
    }

    _getXScrollbarThumbPos() {
        let lpos = $('#divId').scrollLeft();
        let rpos = lpos + SCROLLBAR_THUMBNAIL_WIDTH; // FIXME how can I get the scrollbarThumbnailWidth
        return rpos;
    }

    _resize() {
        let x = this._getXScrollbarThumbPos();
        //..
    }

    _scroll() {
        let x = this._getXScrollbarThumbPos();
        //..
    }
}

调整大小和滚动监听器工作正常，唯一的瓶颈是如何确定滚动条缩略图的宽度。 win 是 DOM 的 window 的 nw.js 包装器，参见 here （此处未显示初始化，因为它与问题无关） .

Answer 1

这是我最终使用的解决方案。由于动态宽度，我还没有找到直接获取正确 scrollbar-thumb 位置的任何尺寸的方法（为此我也没有检测到计算方法），但实际上我已经能够解决这个问题; 通过确定总内容（即可见内容+溢出内容）的宽度，并减去可见内容宽度和向左滚动content-width，我们可以确定可滚动内容的最右位置，在视口内，（忽略任何可能的边框宽度）等于 scollbar-thumb.

的正确位置

class C {
    constructor() {
        win.on('resize', this._resize.bind(this));
        $('#divId').on('scroll', this._scroll.bind(this));
    }

    _getXScrollbarThumbPos() {
        // width of the content + overflow
        let totalWidth = $('#divId').scrollWidth;
        // width of the visible (non overflowing) content
        let viewWidth = $('#divId').width();
        // the amount of pixels that the content has been scrolled to the left
        let lpx = document.getElementById('#divId').scrollLeft;
        // the amount of pixels that are hidden to right area of the view
        let rpx = totalWidth - viewWidth - lpx;
        // represents the right position of the scrollbar-thumb
        console.log(rpx);
        return rpx;
    }

    _resize() {
        let x = this._getXScrollbarThumbPos();
        //..
    }

    _scroll() {
        let x = this._getXScrollbarThumbPos();
        //..
    }
}

如何获得滚动条缩略图的正确位置？

How can I get the right position of the scrollbar-thumbnail?

html

javascript

css

jquery

nwjs