HTMLスクロール：内部要素を「カット」する方法

Question

この質問は、自動テキストドロップダウンリストのためのものです。

基本的には、それぞれがdivである提案要素を含むdivで構成されています。

私は正常に動作するために初めの立場になったが、今あなたがドロップダウンリストの高さを制限することができますので、私は含むdiv要素に垂直スクロールを追加した、と私は次の動作を得た：

場合スクロールを使用すると、「ピクセル」で上下にスクロールするため、要素がすべてカットされて、すべてが見た目には洗練されます。

スクロールを使用するときにdiv要素全体を上下に移動するような振る舞いをオーバーライドしたいと思います。私はこのためのGoogleの方法を知らない...

誰もがこれに関する有用なリソースを知っているか、スクロールの移動イベントをオーバーライドすることが可能な場合は、別の方向？

事前にどうもありがとう

注：私はjqueryのオートコンプリートのプラグインを使用することはできません。

Answer 1

マウスイベントを使用して位置を手動で更新することで、独自のスクロールバーを実装できます。

Answer 2

要素の 'scroll'イベントをタップすることはできません（DOM 3 Eventsは要素のスクロールイベントを提供していますが、サポートされているかどうかはわかりません）。スクロール位置が変更されるたびに、スクロール位置を最も近い「ノッチ」に丸めて調整する独自のルーチンですか？

または、スクロール位置を定期的にポーリングし、移動したときに調整することができます。 This scroll positionはかなりクロスブラウザのようです。

Answer 3

これは単純に行うことはできません、解決策、期間はありません。 1つはこの制限で生きなければならない。

なぜ解決策はありませんか？

独自のスクロールバーを実装しても、スクロールイベントに依存する必要があり、これらは取り消されたり、本体要素にバブリングされたりすることはありません。実際には、彼らはできません、あなたは家に帰るまで彼らはまだ泡立つまでpreventDefault（）とstopPropagation（）を呼び出すことができます。これは、標準化本体とブラウザの実装者の意図的な決定です。

スクロールイベントがキャンセル可能だった場合、EхpentrtEchangchangはページの一番下までスクロールして回答を見ることができなくなりました;）（「EхpentrtEхchange」でキリル文字を使用したので心配しないでください。索引付け可能な言及）。

Answer 4

まず：あなた自身のスクロールバーを使用して

は、スクロールイベントハンドラを作成します。ここではdelta（これはevtにあります）のアニメーションを使用して、要素のscrollTopを上または下の可視要素のoffsetHeightで設定することができます。また、divの高さが要素を切り取っても、前の要素または次の要素をビット「上位」にすると、切り取り要素を上下に押し上げる高さに設定されます。第二に

は：

あなたはわずか数の要素が見える「パッチ」のdivだろうことができるように。スクロールしている最中にスクロールすると、s crollTopまたはscrollHeightを使用せずに、アニメーションの下の1つを表示します。

Firefoxでのスクロールイベントに注意してください。別の名前がありますが、次のようにテストできます：

eventName = eventName === 'mousewheel' ? ((/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : eventName) : eventName; 

幸運。約2日で助けが必要な場合は、私もそれが必要なので、私はそれを実装します。