我正在尝试检测滚动条拇指的正确位置。如果可能的话,有人可以解释一下吗?滚动条缩略图没有固定宽度。我正在使用 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 窗口的 nw.js 包装器,参见 here (此处未显示初始化,因为它与问题无关)。
最佳答案
这是我最终使用的解决方案。由于动态宽度,我还没有找到直接获取右滚动条拇指位置的任何尺寸的方法(为此我也没有检测到计算方法),但实际上我已经能够解决问题; 通过确定总内容的宽度(即可见内容 + 溢出内容),并减去可见内容宽度和滚动到左侧的内容宽度,我们可以确定可滚动内容在视口(viewport)内的最右边位置,它(忽略任何可能的边框宽度)等于 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();
//..
}
}
关于javascript - 如何获得滚动条缩略图的正确位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42027354/