luislobo9b · January 27, 2023 21:29
diff --git a/subir-e-descer-selecao.html b/subir-e-descer-selecao.html
 <!doctype html>
 <html lang="pt-br">

 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">

 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

 	<style>
 		/* bootstrap fix */
 		ul.list-group {
 			border-radius: 0;
 		}

 		.selected {
 			background-color: #ddd;
 		}

 		ul {
 			margin: 3rem auto;
 			max-width: 500px;
 			max-height: 300px;
 			overflow-y: scroll;
 		}
 	</style>

 	<script>
 		const lessStyles = [...document.querySelectorAll('style[type="text/less"]')]
 		lessStyles.forEach(styleElement => {
 			const lessCode = styleElement.textContent
 			less.render(lessCode, (error, output) => {
 				const cssCode = output.css
 				styleElement.textContent = cssCode
 				styleElement.setAttribute('type', 'text/css')
 			})
 		})
 	</script>
 </head>

 <body>

 	<ul class="options list-group">
 		<li class="list-group-item selected">Accusamus, explicabo</li>
 		<li class="list-group-item">Necessitatibus, ipsum</li>
 		<li class="list-group-item">Tempora earum</li>
 		<li class="list-group-item">Consectetur assumenda</li>
 		<li class="list-group-item">Suscipit eos</li>
 		<li class="list-group-item">Dolorem molestias</li>
 		<li class="list-group-item">Fuga architecto</li>
 		<li class="list-group-item">Quaerat vel</li>
 		<li class="list-group-item">Nostrum beatae</li>
 		<li class="list-group-item">Exercitationem elit</li>
 		<li class="list-group-item">Adipisci iure</li>
 		<li class="list-group-item">Magni optio</li>
 		<li class="list-group-item">Animi magni</li>
 		<li class="list-group-item">Rerum obcaecati</li>
 		<li class="list-group-item">Totam placeat</li>
 	</ul>

 	<div class="text-center">
 		<button class="btn-up btn btn-primary">SUBIR</button>
 		<button class="btn-down btn btn-primary">DESCER</button>
 	</div>

 	<script>
 		const btnUp = document.querySelector('.btn-up'),
 			btnDown = document.querySelector('.btn-down'),
 			ulOptions = document.querySelector('ul')

 		btnUp.addEventListener('click', () => {
 			const liSelected = ulOptions.querySelector('.selected'),
 				prevLi = liSelected.previousElementSibling

 			if (prevLi) { // se existir próximo elemento
 				setNewScrollPosition(liSelected, prevLi)
 			}
 		})

 		btnDown.addEventListener('click', () => {
 			const liSelected = ulOptions.querySelector('.selected'),
 				nextLi = liSelected.nextElementSibling

 			if (nextLi) { // se existir próximo elemento
 				setNewScrollPosition(liSelected, nextLi)
 			}
 		})

 		function setNewScrollPosition(oldLi, newLi) {
 			oldLi.classList.remove('selected')
 			newLi.classList.add('selected')

 			// calcula as posições de UL e LI para saber a altura de LI dentro de UL
 			const UlPositionY = ulOptions.offsetTop,
 				liPositionY = newLi.offsetTop
 			let liCenterPosition = liPositionY - UlPositionY

 			// agora eu adiciono metade da altura da li porque eu quero obter o centro dela
 			liCenterPosition += newLi.clientHeight / 2

 			// agora eu calculo a nova posição do scroll
 			// o que eu quero é que ele fique no centro, então eu calculo
 			// o tamanho da UL e divido por dois, pra centralizar o ponto central da li
 			// no centro do scroll de Ul
 			const newScrollPosition = liCenterPosition - ulOptions.clientHeight / 2

 			// agora só setar o novo valor
 			// para não mudar o primeiro argumento eu coloco assim, mas poderia ser 0
 			// já que vc não usa o scrollX
 			ulOptions.scrollTo(ulOptions.scrollLeft, newScrollPosition)
 		}
 	</script>
 </body>

 </html>
	<!doctype html>
	<html lang="pt-br">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

	<style>
	/* bootstrap fix */
	ul.list-group {
	border-radius: 0;
	}

	.selected {
	background-color: #ddd;
	}

	ul {
	margin: 3rem auto;
	max-width: 500px;
	max-height: 300px;
	overflow-y: scroll;
	}
	</style>

	<script>
	const lessStyles = [...document.querySelectorAll('style[type="text/less"]')]
	lessStyles.forEach(styleElement => {
	const lessCode = styleElement.textContent
	less.render(lessCode, (error, output) => {
	const cssCode = output.css
	styleElement.textContent = cssCode
	styleElement.setAttribute('type', 'text/css')
	})
	})
	</script>
	</head>

	<body>

	<ul class="options list-group">
	<li class="list-group-item selected">Accusamus, explicabo</li>
	<li class="list-group-item">Necessitatibus, ipsum</li>
	<li class="list-group-item">Tempora earum</li>
	<li class="list-group-item">Consectetur assumenda</li>
	<li class="list-group-item">Suscipit eos</li>
	<li class="list-group-item">Dolorem molestias</li>
	<li class="list-group-item">Fuga architecto</li>
	<li class="list-group-item">Quaerat vel</li>
	<li class="list-group-item">Nostrum beatae</li>
	<li class="list-group-item">Exercitationem elit</li>
	<li class="list-group-item">Adipisci iure</li>
	<li class="list-group-item">Magni optio</li>
	<li class="list-group-item">Animi magni</li>
	<li class="list-group-item">Rerum obcaecati</li>
	<li class="list-group-item">Totam placeat</li>
	</ul>

	<div class="text-center">
	<button class="btn-up btn btn-primary">SUBIR</button>
	<button class="btn-down btn btn-primary">DESCER</button>
	</div>

	<script>
	const btnUp = document.querySelector('.btn-up'),
	btnDown = document.querySelector('.btn-down'),
	ulOptions = document.querySelector('ul')

	btnUp.addEventListener('click', () => {
	const liSelected = ulOptions.querySelector('.selected'),
	prevLi = liSelected.previousElementSibling

	if (prevLi) { // se existir próximo elemento
	setNewScrollPosition(liSelected, prevLi)
	}
	})

	btnDown.addEventListener('click', () => {
	const liSelected = ulOptions.querySelector('.selected'),
	nextLi = liSelected.nextElementSibling

	if (nextLi) { // se existir próximo elemento
	setNewScrollPosition(liSelected, nextLi)
	}
	})

	function setNewScrollPosition(oldLi, newLi) {
	oldLi.classList.remove('selected')
	newLi.classList.add('selected')

	// calcula as posições de UL e LI para saber a altura de LI dentro de UL
	const UlPositionY = ulOptions.offsetTop,
	liPositionY = newLi.offsetTop
	let liCenterPosition = liPositionY - UlPositionY

	// agora eu adiciono metade da altura da li porque eu quero obter o centro dela
	liCenterPosition += newLi.clientHeight / 2

	// agora eu calculo a nova posição do scroll
	// o que eu quero é que ele fique no centro, então eu calculo
	// o tamanho da UL e divido por dois, pra centralizar o ponto central da li
	// no centro do scroll de Ul
	const newScrollPosition = liCenterPosition - ulOptions.clientHeight / 2

	// agora só setar o novo valor
	// para não mudar o primeiro argumento eu coloco assim, mas poderia ser 0
	// já que vc não usa o scrollX
	ulOptions.scrollTo(ulOptions.scrollLeft, newScrollPosition)
	}
	</script>
	</body>

	</html>