質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2592閲覧

常に一番下にスクロールする

rumi

総合スコア46

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/11/18 15:07

チャット機能でmCustomScrollbarを利用しています。
遷移したあと、常に一番下のメッセージ部分にスクロールしている状態にするにはどのようなコードをかけばよろしいでしょうか?

ご存知の方はご教示いただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

質問者さんが想像するような動作は以下のように行えると思いますがいかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" 7 href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"> 8 <style type="text/css"> 9 .content { 10 height: 400px; 11 color: #eee; 12 background-color: #333; 13 } 14 </style> 15</head> 16<body> 17<div class="content"> 18 <table> 19 <tr> 20 <td>Row 1</td> 21 </tr> 22 <tr> 23 <td>Row 2</td> 24 </tr> 25 <tr> 26 <td>Row 3</td> 27 </tr> 28 <tr> 29 <td>Row 4</td> 30 </tr> 31 <tr> 32 <td>Row 5</td> 33 </tr> 34 <tr> 35 <td>Row 6</td> 36 </tr> 37 <tr> 38 <td>Row 7</td> 39 </tr> 40 <tr> 41 <td>Row 8</td> 42 </tr> 43 <tr> 44 <td>Row 9</td> 45 </tr> 46 <tr> 47 <td>Row 10</td> 48 </tr> 49 <tr> 50 <td>Row 11</td> 51 </tr> 52 <tr> 53 <td>Row 12</td> 54 </tr> 55 <tr> 56 <td>Row 13</td> 57 </tr> 58 <tr> 59 <td>Row 14</td> 60 </tr> 61 <tr> 62 <td>Row 15</td> 63 </tr> 64 <tr> 65 <td>Row 16</td> 66 </tr> 67 <tr> 68 <td>Row 17</td> 69 </tr> 70 <tr> 71 <td>Row 18</td> 72 </tr> 73 <tr> 74 <td>Row 19</td> 75 </tr> 76 <tr> 77 <td>Row 20</td> 78 </tr> 79 <tr> 80 <td>Row 21</td> 81 </tr> 82 <tr> 83 <td>Row 22</td> 84 </tr> 85 <tr> 86 <td>Row 23</td> 87 </tr> 88 <tr> 89 <td>Row 24</td> 90 </tr> 91 <tr> 92 <td>Row 25</td> 93 </tr> 94 <tr> 95 <td>Row 26</td> 96 </tr> 97 <tr> 98 <td>Row 27</td> 99 </tr> 100 <tr> 101 <td>Row 28</td> 102 </tr> 103 <tr> 104 <td>Row 29</td> 105 </tr> 106 <tr> 107 <td>Row 30</td> 108 </tr> 109 <tr> 110 <td>Row 31</td> 111 </tr> 112 <tr> 113 <td>Row 32</td> 114 </tr> 115 <tr> 116 <td>Row 33</td> 117 </tr> 118 <tr> 119 <td>Row 34</td> 120 </tr> 121 <tr> 122 <td>Row 35</td> 123 </tr> 124 <tr> 125 <td>Row 36</td> 126 </tr> 127 <tr> 128 <td>Row 37</td> 129 </tr> 130 <tr> 131 <td>Row 38</td> 132 </tr> 133 <tr> 134 <td>Row 39</td> 135 </tr> 136 <tr> 137 <td>Row 40 - end</td> 138 </tr> 139 </table> 140</div> 141<button id="button1">クリック</button> 142<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 143<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> 144<script> 145 (function ($) { 146 var i = 41, 147 s = $(".content"), 148 observer = new MutationObserver(function (r) { 149 r.forEach(function (r) { 150 if (r.type === "childList") { 151 if (r.addedNodes.length > 0 && r.removedNodes.length <= 0) { 152 $(".content").mCustomScrollbar("scrollTo", "bottom"); 153 } 154 } 155 }); 156 }); 157 158 observer.observe(document.querySelector(".content table"), { 159 childList: true, 160 subtree: true, 161 }); 162 163 $(window).on("load", function () { 164 s.mCustomScrollbar({ 165 snapAmount: 40, 166 keyboard: {scrollAmount: 40}, 167 mouseWheel: {deltaFactor: 40}, 168 scrollInertia: 400, 169 updateOnContentResize: true, 170 }); 171 172 s.mCustomScrollbar("scrollTo", "bottom"); 173 }); 174 175 $("#button1").on("click", function () { 176 $(".content table").append("<tr><td>Row " + i + "</td></tr>"); 177 i += 1; 178 }) 179 })(jQuery); 180</script> 181</body> 182</html>

投稿2017/11/18 18:30

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

以下で対応済み

$('.mCustomScrollbar').mCustomScrollbar({setTop:'-9999999px'}); if ($(ele).data('method') == 'panel_workroom') {//上のsettopで底までいかなかった場合一瞬settopの位置を表示した後、底まで行く $('.mCustomScrollbar').mCustomScrollbar('scrollTo', 'bottom',{scrollInertia:0}); }

投稿2018/02/17 18:12

編集2018/02/17 18:15
rumi

総合スコア46

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問