2017-02-03 12 views
0

私は、スクロールバーの親指の正しい位置を検出しようとしています。可能であれば、誰かに説明してください。スクロールバーのサムネイルの幅は固定されていません。私は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を参照してください(ここでは初期化は表示されていません)。

答えて

0

これは私が最終的に使用した解決策です。動的な幅のために右のスクロールバー - サム位置の任意の次元を直接取得する方法は見つけられませんでしたが(これについても計算方法は検出されませんでした)、実際には問題; コンテンツ全体の幅(見える+オーバーフローするコンテンツ)を決定し、視認可能なコンテンツの幅を減算して左のコンテンツ幅までスクロールすることにより、ビューポート内のスクロール可能なコンテンツの完全な正しい位置を決定できます。 (可能な境界線の幅を無視する)は、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(); 
     //.. 
    } 
} 
関連する問題