1

ビデオの進行状況バーをinput type=range表すスライダーがあります。このスライダーは小さなコンテナー内にラップされているため、スライダーのつまみがコンテナーの端に達すると、コンテナーが左にスクロールして、つまみが再び表示されるようになります。したがって、これがいつ発生するかを検出する必要があります。スライダーをクリックした後にも発生するため、ビデオの timeupdate イベントを使用できませんが、この場合、コンテナーはスクロールしないはずです。HTMLスライダーよりも精度が低いため、jQueryUIスライダーも使用できません...

親指の実際の位置をピクセル単位で検出する方法を見つける必要があると思います。残念ながらシャドウDOM要素はどれですか... javascript/jqueryでそれを取得する方法はありますか?

<input type=range>更新:これは、開発者ツールに表示されるように、Chrome が DOM 要素をレンダリングする方法です。

<input type="range">
  #shadow-root
    <div>  --> This is the slider container
      <div>  --> This is the slider track
        <div></div>  --> This is the slider thumb
      </div>
      <div style="visibility: hidden; position: static;"></div>
    </div>
</input>

私がやりたいことは、その値を探すことなく、スライダーのつまみ div の位置 (絶対または相対) を検出することです。

4

1 に答える 1

0

あなたは私があなたがやろうとしていることを完全に理解していないいくつかのコードを示すことができます...

jQueryを使用して、次のようにシャドウ要素をバインドしてみてください。

$(document).on('change', 'input[type="range"]', function(e) {
    var left = $('#imgId').position().left,
        rangePosition = $(this).val();
});
于 2013-02-08T12:10:05.650 に答える