Работа с скролом у блока

209

15 ноября 2018, 19:40

Возникло несколько моментов с прокруткой блока. Прошу заметить, тут меня не интересует прокрутка страницы, как оказалось... оно работает иначе. 1. Как запустить функцию js когда до начала блока(конца в моём случае) осталось 200px. 2. Как перемещать человека в самый конец (начало в моём случае) блока при загрузке страницы

Приведу примеры, что у меня не работает Прокрутка в конец

	window.onload = function() { 
		var objDiv = document.getElementById("#logick"); 
		objDiv.scrollTop = objDiv.scrollHeight; 
	};

#logick{ 
  height: 5000px; 
  width: 600px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<div  id="fcontent" class="fcontent"> 
    <div  id="logick"  class="logick"></div> 
</div>

А вот не рабочий вариант запуска функции

$(window).scroll(function () { 
  if ($("#logick").scrollTop() <= 200) { 
    alert(); 
  } 
});

#logick{ 
  height: 5000px; 
  width: 600px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<div  id="fcontent" class="fcontent"> 
    <div  id="logick"  class="logick"></div> 
</div>

Answer 1

Если касаемо конкретно прокрутки в блоке то будет вот так.

var anchor = true; 
 
function fuckingFunction(){ 
  if(anchor){ 
    alert('Hello World, I am fucking function, меня запустили один раз за 200px до конца искомого блока и счас вас прокрутят обратно вверх, потому что мне кажется что вы прочли не все лоремы'); 
    var topBlock = $('.on_this').offset().top; 
  	$('html, body').animate({scrollTop: topBlock}, 2000); 
    anchor = false; 
  } 
} 
 
$(window).on('scroll', function(e){ 
   if( ($('.on_this').offset().top + $('.on_this').height() -200) < ($(window).scrollTop()+ $(window).height())){ 
   fuckingFunction(); 
   } 
}); //запуск функции за 200px до конца блока. 
 
$(document).ready(function(){ 
	var topBlock = $('.on_this').offset().top; 
  $('html, body').animate({scrollTop: topBlock}, 2000); 
}); //прокрутка до верха нужного блока искомого блока

.on_this{ 
  color: coral; 
  border: 1px dashed coral; 
  border-radius: 8px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div class="on_this">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate 
ore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptatsapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam iusto vel dolore quod sit perspiciatis repellat voluptatem magnam impedit! Illo in nobis eos. Voluptate sapiente repellendus, aspernatur, non ipsum optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed nam eveniet architecto repellat similique officiis facilis molestias sit doloremque, nisi illum et officia maiores, vero magni itaque expedita rerum.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div>

Answer 2

var anchor = true; 
 
function fuckingFunction(){ 
  if(anchor){ 
    alert('Hello World, I am fucking function, меня запустили один раз за 200px до искомого блока'); 
    anchor = false; 
  } 
} 
 
$(window).on('scroll', function(e){ 
    if ($('html, body').scrollTop()+$(window).height() > $('.on_this').offset().top -200) { 
       fuckingFunction(); 
    } 
}); //запуск функции за 200px до блока. 
 
$(document).ready(function(){ 
	var bottomBlock = $('.on_this').offset().top - $(window).height() + $('.on_this').height(); 
  $('html, body').animate({scrollTop: bottomBlock}, 2000); 
}); //прокрутка до низа искомого блока

.on_this{ 
  color: coral; 
  border: 1px dashed coral; 
  border-radius: 8px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div class="on_this">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptates, nihil in repellat, totam rerum libero et iste expedita impedit culpa architecto quos, eos ipsam officia nemo ipsum perferendis ab.</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать placeholder'ы под картинки при их загрузке на странице

Такой стиль загрузки я заметил на сайте https://unsplashcom/(Наверное всем известен ) Помогите пожалуйста , буду ждать ответа

242

javascript

Плавное наведение JS

Есть галерея,при наведении на картинку должен появляться hover с текстом,должно это все выглядеть как ТУТ когда наводишь на картинку он очень...

290

javascript

Печать заголовка на каждой странице

Проблема с печатной формойПисьмо которое формируется динамически

205

javascript

При клике записать значение в input

Есть class="quantity" в этот класс должны приходить значения количество детей у которых выбран возрастВ class="number_val" возраст ребенка, а в class="input_val"...

267