@VadimZa
-

Плагин slimscroll как сфокусировать в нижней части div-блока с комментариями?

комментарии расположены аналогично ВКашным, (и хочется добиться аналогичного эффекта)
тоесть новое сообщение которое добавил отображается внизу 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>
  • Вопрос задан
  • 302 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы