剣道ドロップダウンリストの折りたたみを防止する方法Javascriptを使用したページスクロール

Question

私は奇妙な問題に直面しており、3つのソリューションを実装しようとしましたが、うまくいかなかったのです。

問題は、外側のページのスクロールで剣道ドロップダウンが折りたたまれたときのデフォルトの機能にあります。私は崩壊を防ぎたいと思って研究をしました。

私はこれを防止するためのソリューションhereを持っているが、これはそこに示されプレビューセクションの下で正常に動作しているが、同じことが道場（右上のリンク）の下で、実際のプロジェクトで作業されていません。

私は道場にプレビューずにドロップダウンの崩壊を防止する見ることができるに違いはありません。

私は剣道の初心者と同じように解決してください。

Answer 1

この動作を制御するには、閉じるウィジェットのイベントを処理する必要があると私は信じています。ここで は一例です：

<input id="dropdownlist" /> 
    <script> 
     $("#dropdownlist").kendoDropDownList({ 
      dataSource: [ "text1", "text2" ], 
      close: _myClose.bind(this) 
     }); 

     var _myClose = function (e) { 
      var wish = true; 
      var element = e.sender; 
      if (wish) { 
       e.preventDefault(); 
      } 
     }; 
</script> 

あなたのクラス属性の利点を持つことができるように、私はこのをバインドします。必要なら削除することができます。剣道ウィジェットのインスタンスはe.senderオブジェクトの下にあります。

ここにはDocsへのリンクがあります。 お手伝いをしてください。

Answer 2

$(".k-list-container").each(function() { 
    var elementId = this.id.split("-")[0]; 
    var widget = $("#" + elementId).data("kendoDropDownList"); 
    if (widget) { 
     widget.ul.parent().on("wheel", function (e) { 
      var container = this; 
      if ((container.scrollTop == 0 && e.originalEvent.deltaY < 0) || 
       (container.scrollTop == container.scrollHeight - container.offsetHeight && e.originalEvent.deltaY > 0)) { 
       e.preventDefault(); 
       e.stopPropagation(); 
      } 
     }); 
    } 
}); 

Answer 3

私は確実に限り、剣道のドロップダウンリストが開いていて、マウスがリストのオプションの上に推移しているように、ページのスクロールを無効にするには、この簡単なスニペットを見つけました。

// Fix annoyance where entire page scrolls when you scroll to the bottom of a dropdown 
$(document).bind('mousewheel DOMMouseScroll', function (e) { 
    var kendoDropdownBoxes = $('.k-list-container[style*="display: block"]'); 
    if (kendoDropdownBoxes.length > 0 && kendoDropdownBoxes.is(':hover')) { 
     $("body").css("overflow", "hidden"); 
    } else { 
     $("body").css("overflow", "auto"); 
    } 
});