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

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

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

行動規範の内容に同意します

回答2件

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

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

自己解決

以下で対応済み

$('.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