Синхронный скролл двух блоков

Пример:

Прокрутите вниз один из блоков

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

HTML:

<div class="sync-blocks">
	<div class="block-1">
		<p>Контент</p>	
	</div>
	<div class="block-2">
		<p>Контент</p>			   
	</div>
</div>

<p>Контент</p>

</div>

<p>Контент</p>

</div>

CSS:

.sync-blocks {
	display: flex;
}
.block-1,
.block-2 {
	height: 360px;
	overflow: auto;
}

.sync-blocks {

display: flex;

}

.block-1,

.block-2 {

height: 360px;

overflow: auto;

}

jQuery:

function syncScroll(el1, el2) {
	let $el1 = $(el1);
	let $el2 = $(el2);
	let forcedScroll = false;
	$el1.scroll(function() { performScroll($el1, $el2); });
	$el2.scroll(function() { performScroll($el2, $el1); });
	function performScroll($scrolled, $toScroll) {
		if (forcedScroll) return (forcedScroll = false);
		setScrollTopFromPercent($toScroll, $scrolled.scrollTop() / ($scrolled[0].scrollHeight - $scrolled.outerHeight()));
	}
	function setScrollTopFromPercent($el, percent) {
		forcedScroll = true;
		$el.scrollTop(percent * ($el[0].scrollHeight - $el.outerHeight()));
	}
}
syncScroll($('.block-1'), $('.block-2'));

function syncScroll(el1, el2) {

let $el1 = $(el1);

let $el2 = $(el2);

let forcedScroll = false;

$el1.scroll(function() { performScroll($el1, $el2); });

$el2.scroll(function() { performScroll($el2, $el1); });

function performScroll($scrolled, $toScroll) {

if (forcedScroll) return (forcedScroll = false);

setScrollTopFromPercent($toScroll, $scrolled.scrollTop() / ($scrolled[0].scrollHeight - $scrolled.outerHeight()));

}

function setScrollTopFromPercent($el, percent) {

forcedScroll = true;

$el.scrollTop(percent * ($el[0].scrollHeight - $el.outerHeight()));

}

syncScroll($('.block-1'), $('.block-2'));

Найдено на codepen.io у пользователя topicstarter

Пример:

HTML:

CSS:

jQuery:

Смотрите также:

Добавить комментарий: