комментарии расположены аналогично ВКашным, (и хочется добиться аналогичного эффекта)
тоесть новое сообщение которое добавил отображается внизу div-блока с комментариями.
плагин slimscroll работает исправно кроме опции start: 'bottom', происходит так: открываю модальное окно отображается верхняя часть div-блока с комментариями при наведении на него и любого движения колесика мышки фокус перемещается как и должен то есть вниз.
проблема заключается в том чтобы при загрузке модального окна изначально фокус был внизу.
$("#all_comments_s").slimscroll({
size: '7px',
height: '400px',
color: 'rgba(0,0,0,.6)',
distance: '0px',
start: 'bottom',
railVisible: true,
railColor: 'rgba(255,255,255,.1)',
railOpacity: 1,
wheelStep: 20,
borderRadius: '3px',
railBorderRadius: '0px',
allowPageScroll: false,
opacity: 0
}).mouseover(function() {
$(this).next('.slimScrollBar').css('opacity', 0.4);
});
<div class="col-lg-8">
<div class="panel panel-flat no-margin-top no-margin-bottom">
<div class="panel-body" id="all_comments_s">
<div id="all_comments">
<div class="media">
<div class="media-left">
<a><img class="img-circle" src="img/user1.jpg"></a>
</div>
<div class="media-body comments">
<h6 class="media-heading">user1<span class="media-annotation pull-right">00.00.2017 00:00:00</span></h6>
Коммент 1
<ul class="list-inline m-t-5">
<li><a href="projects_details.htm#"><i class="icon-pencil6 text-danger position-left"></i>Изменить</a></li>
</ul>
</div>
</div>
<div class="media">
<div class="media-left">
<a><img class="img-circle" src="img/user2.jpg"></a>
</div>
<div class="media-body comments">
<h6 class="media-heading">user2<span class="media-annotation pull-right">00.00.2017 00:00:00</span></h6>
Коммент 2
<ul class="list-inline m-t-5">
<li><a href="projects_details.htm#"><i class="icon-pencil6 text-danger position-left"></i>Изменить</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<ul class="media-list search-results-list">
<li class="media">
<form id="add_new_comment_form" novalidate="novalidate">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-icon bg-slate-darker" type="reset"><i class="fa fa-remove" aria-hidden="true"></i></button>
</span>
<input type="hidden" id="comment_application_id" name="Application_ID" value="954">
<textarea id="ApplicationResume" name="ApplicationResume" class="form-control bg-slate comment-area" placeholder="Комментарий..." rows="3" required="" aria-required="true"></textarea>
<span class="input-group-btn">
<button class="btn btn-default bg-slate-darker" type="submit" id="save_new_comment_button"><i class="fa fa-send-o" aria-hidden="true"></i></button>
</span>
</div>
</form>
</li>
</ul>
</div>