focus => scrollTop

Test scrollTop changing due to use of method fucus()

by AntowaKartowa

HTML

<div class="cutting-container">
	<div class="overflowing-container">
		<div class="block block-01"></div>
		<div class="block block-02"></div>
		<div class="block block-03"></div>
		<div class="block block-04"></div>
		<div class="block block-05"></div>
		<div class="block block-06"></div>
		<div class="block block-07"></div>
	</div>
</div>

CSS

html, body {
	position: relative;
	height: 100%;
	margin: 0;
}

.cutting-container {
	position: relative;
	height: inherit;
	/* overflow: hidden; */
}

.overflowing-container {
	position: relative;
	padding: 1px 0;
}

.block {
	height: 100px;
	margin: 10px;
	background-color: #fff;
	border: 1px solid #000;
}

.block-02 {
	background-color: #efe;
}

.block-03 {
	background-color: #dfd;
}

.block-04 {
	background-color: #cfc;
}

.block-05 {
	background-color: #bfb;
}

.block-06 {
	background-color: #afa;
}

.block-07 {
	background-color: #9f9;
}

JavaScript

let focusing = document.body.querySelector(".block-03");

focusing.addEventListener("click", forceFocus.bind(focusing));

function forceFocus() {
	this.focus();
}