не работает функция из-за display:none

428

27 мая 2017, 15:34

$('.chat').scrollTop(100000); // эта функция не выполняется из-за display:none, если убрать это свойство то она заработает. 
 $('#chat-click').click(function() { 
   $('.chat').toggle(); 
 });

.chat { 
  display:none; 
  height:100px; 
  overflow-y:scroll; 
  width:300px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="chat"> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
</div> 
 
<button id="chat-click">OPEN/CLOSE</button>

Не выполняется функция scrolltop, из-за того что изначально селектору chat присвоен параметр display:none, если его убрать все заработает. Как это обойти?

Answer 1

Проблема действительно в display:none, так как нельзя прокрутить элемент, если у него нет прокрутки.

Обойти можно несколькими путями:

прокручивать в обработчике клика, когда элемент стал видимым

сделать элемент видимым, прокрутить, скрыть элемент
Например:

$('.chat').show().scrollTop(100000).hide(); // эта функция не выполняется из-за display:none, если убрать это свойство то она заработает. 
$('#chat-click').click(function() { 
  $('.chat').toggle(); 
});

.chat { 
  display: none; 
  height: 100px; 
  overflow-y: scroll; 
  width: 300px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
<div class="chat"> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
</div> 
 
<button id="chat-click">OPEN/CLOSE</button>

убрать из класса display:none, прокрутить элемент и скрыть его

$('.chat').scrollTop(100000).hide(); // эта функция не выполняется из-за display:none, если убрать это свойство то она заработает. 
$('#chat-click').click(function() { 
  $('.chat').toggle(); 
});

.chat { 
  height: 100px; 
  overflow-y: scroll; 
  width: 300px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script> 
<div class="chat"> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
</div> 
 
<button id="chat-click">OPEN/CLOSE</button>

Answer 2

 $('#chat-click').click(function() { 
   $('.chat').toggle(); 
   $('.chat').scrollTop(100000);  
 });

.chat { 
  display:none; 
  height:100px; 
  overflow-y:scroll; 
  width:300px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="chat"> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
  <li>message</li> 
</div> 
 
<button id="chat-click">OPEN/CLOSE</button>

Пришел к такому решению. Чтобы при каждом нажатии на кнопку - выполнялась функция.