Как проверить позицию скролла на javascript праивльно?

https://qna.habr.com/q/765315

by ProjectSoft

HTML

<div id="console">0</div>
<div class="gallery">
	<div class="gallery__wrapper">
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
		<div class="gallery__wrapper-img">
			<img src="https://projectsoft.ru/assets/cache/images/0018/0026/ogimage-500x281-17c.jpg">
		</div>
	</div>
</div>

CSS

*, ::before, ::after {
	box-sizing: border-box;
}
#console {
	padding: 1em;
}
#console::before {
	content: "Scroll left:";
	display: inline-block;
	padding-right: 1em;
}
img {
	max-width: 100%;
}
.gallery {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	flex: 1;
	width: 100%;
	flex-basis: 100%;
}
.gallery__wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
}
.gallery__wrapper-img {
	padding-left: 0.5em;
	padding-right: 0.5em;
	min-width: 300px;
}

JavaScript

var slbox = document.getElementsByClassName('gallery__wrapper')[0],
	output = document.getElementById('console');

slbox.addEventListener('scroll', function(e){
	output.innerHTML = e.target.scrollLeft;
	console.log(e.target.scrollLeft);
});