스크롤바 축소판의 올바른 위치를 얻으려면 어떻게해야합니까?

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 창의 nw.js 래퍼입니다 (here 참조). 여기에는 초기화가 표시되어 있지 않으므로 질문과 관련이 없습니다.

Answer 1

이것이 결국 사용 된 해결책입니다. 동적 폭 (이 값을 계산할 방법을 찾지 못했음)으로 인해 오른쪽 스크롤바 - 엄지 손가락 위치의 치수를 직접 구할 수있는 방법을 찾지 못했지만, 실제로이를 해결할 수있었습니다. 문제; 전체 콘텐츠 (즉, 표시 가능 + 오버플로 콘텐츠)의 너비를 결정하고 표시 가능한 콘텐츠 너비와 왼쪽 콘텐츠 너비를 뺀 값을 비교하여 뷰포트 내에서 스크롤 가능한 콘텐츠의 가장 오른쪽 위치를 결정할 수 있습니다. (경계 폭을 무시한 채로) 엄지 손가락의 오른쪽 위치와 같습니다.

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(); 
     //.. 
    } 
}