ブートストラップドロップダウンでスクロールを使用する

私は、ブートストラップドロップダウンメニューにスクロールを追加しようとしています。これは垂直スクロールで、コードは以下のようになります。まずドロップダウンがありますが、2番目のドロップダウンのようなスクロールを追加すると、すべてが分断されます。スクロールを適切にドロップダウンに正しく追加するにはどうすればいいですか？私は私の例でプラグインを使いたいと思う。ブートストラップドロップダウンでスクロールを使用する

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script> 
 
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Menu item 1</a></li> 
 
    <li><a href="#">Menu item 2</a></li> 
 
    <li><a href="#">Menu item 3</a></li> 
 
    <li><a href="#">Menu item 4</a></li> 
 
    <li><a href="#">Menu item 5</a></li> 
 
    <li><a href="#">Menu item 6</a></li> 
 
    <li><a href="#">Menu item 7</a></li> 
 
    <li><a href="#">Menu item 8</a></li> 
 
    <li><a href="#">Menu item 9</a></li> 
 
    <li><a href="#">Menu item 10</a></li> 
 
    </ul> 
 
</div> 
 

 
<br> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button> 
 
    <ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark"> 
 
    <li><a href="#">Menu item 1</a></li> 
 
    <li><a href="#">Menu item 2</a></li> 
 
    <li><a href="#">Menu item 3</a></li> 
 
    <li><a href="#">Menu item 4</a></li> 
 
    <li><a href="#">Menu item 5</a></li> 
 
    <li><a href="#">Menu item 6</a></li> 
 
    <li><a href="#">Menu item 7</a></li> 
 
    <li><a href="#">Menu item 8</a></li> 
 
    <li><a href="#">Menu item 9</a></li> 
 
    <li><a href="#">Menu item 10</a></li> 
 
    </ul> 
 
</div> 
 

 
<script> 
 
$("#myscrollid").mCustomScrollbar({ 
 
    setHeight:"100px", 
 
    scrollbarPosition: "inside", 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-04-10 Peter Karlsson

このようなサービスをお探しですか？ http://stackoverflow.com/a/19229738/171456 – ZimSystem

はい、私はそのように見えるように、このプラグインで結果を望みます。 http://manos.malihu.gr/jquery-custom-content-scroller/ –

-1

<!DOCTYPE html> 
<html> 
<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script> 

</head> 
<body> 

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Menu item 1</a></li> 
    <li><a href="#">Menu item 2</a></li> 
    <li><a href="#">Menu item 3</a></li> 
    <li><a href="#">Menu item 4</a></li> 
    <li><a href="#">Menu item 5</a></li> 
    <li><a href="#">Menu item 6</a></li> 
    <li><a href="#">Menu item 7</a></li> 
    <li><a href="#">Menu item 8</a></li> 
    <li><a href="#">Menu item 9</a></li> 
    <li><a href="#">Menu item 10</a></li> 
    </ul> 
</div> 

<br> 

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button> 
    <ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark"> 
    <li><a href="#">Menu item 1</a></li> 
    <li><a href="#">Menu item 2</a></li> 
    <li><a href="#">Menu item 3</a></li> 
    <li><a href="#">Menu item 4</a></li> 
    <li><a href="#">Menu item 5</a></li> 
    <li><a href="#">Menu item 6</a></li> 
    <li><a href="#">Menu item 7</a></li> 
    <li><a href="#">Menu item 8</a></li> 
    <li><a href="#">Menu item 9</a></li> 
    <li><a href="#">Menu item 10</a></li> 
    </ul> 
</div> 

<script> 
    $(document).ready(function() { 
    $("#myscrollid").mCustomScrollbar({ 
     setHeight:"100px", 
     scrollbarPosition: "inside", 
    }); 
    }); 
</script> 
</body> 
</html>

ソースをダウンロードし、プラグインへのパスを指定します。 jQueryを次のように呼び出す必要があります。これは私のために働いた。

希望します。

出典

2017-04-10 10:50:03 Rayed

あなたのコードを動作させることができません。あなたは例を挙げていただけますか？ –

ブートストラップドロップダウンでスクロールを使用する

答えて

関連する問題