jv-amorim/scroll-mouse-over.html

## scroll-mouse-over.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrolling With Mouse Over Event</title>
  <style>
    body {
      background-color: darkslategray;
    }
    #main-container {
      position: relative;
      width: 300px;
      height: 150px;
    }
    #content {
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: white;
    }
    p {
      text-align: justify;
      margin: 0px;
      padding: 10px;
    }
    #scroll-up-control, #scroll-down-control {
      cursor: pointer;
      width: 100%;
      height: 10px;
      position: absolute;
    }
    #scroll-up-control {
      top: 0px;
    }
    #scroll-down-control {
      bottom: 0px;
    }
  </style>
</head>
<body>
  <div id="main-container">
    <div id="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce orci nulla, condimentum in sem id,
        sollicitudin ultrices orci. Integer aliquam libero ut tortor elementum posuere. Proin finibus purus
        et erat sagittis condimentum vel ac erat. Pellentesque vitae mi lorem. Suspendisse imperdiet enim
        sed sapien molestie luctus. Nulla dapibus, dui vitae dapibus iaculis, felis eros venenatis tellus,
        id molestie lorem ipsum quis lectus. Suspendisse consectetur purus tortor, ut consequat sapien
        vulputate ac. Cras tellus felis, faucibus ac tellus et, pretium pulvinar sapien. Duis blandit
        odio ipsum, eget porttitor lacus malesuada at. In est justo, vehicula nec consectetur sed, accumsan
        eu est. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>
    </div>
    <div id="scroll-up-control"></div>
    <div id="scroll-down-control"></div>
  </div>
  <script>
    const content = document.getElementById('content');
    let currentInterval = null;
    function scrollVertically(value) {
      currentInterval = setInterval(() => content.scrollTop += value, 0.1);
    }
    const scrollUpControl = document.getElementById('scroll-up-control');
    scrollUpControl.addEventListener('mouseenter', () => scrollVertically(-1));
    scrollUpControl.addEventListener('mouseleave', () => clearInterval(currentInterval));
    const scrollDownControl = document.getElementById('scroll-down-control');
    scrollDownControl.addEventListener('mouseenter', () => scrollVertically(1));
    scrollDownControl.addEventListener('mouseleave', () => clearInterval(currentInterval));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Scrolling With Mouse Over Event</title>
	<style>
	body {
	background-color: darkslategray;
	}
	#main-container {
	position: relative;
	width: 300px;
	height: 150px;
	}
	#content {
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: white;
	}
	p {
	text-align: justify;
	margin: 0px;
	padding: 10px;
	}
	#scroll-up-control, #scroll-down-control {
	cursor: pointer;
	width: 100%;
	height: 10px;
	position: absolute;
	}
	#scroll-up-control {
	top: 0px;
	}
	#scroll-down-control {
	bottom: 0px;
	}
	</style>
	</head>
	<body>
	<div id="main-container">
	<div id="content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce orci nulla, condimentum in sem id,
	sollicitudin ultrices orci. Integer aliquam libero ut tortor elementum posuere. Proin finibus purus
	et erat sagittis condimentum vel ac erat. Pellentesque vitae mi lorem. Suspendisse imperdiet enim
	sed sapien molestie luctus. Nulla dapibus, dui vitae dapibus iaculis, felis eros venenatis tellus,
	id molestie lorem ipsum quis lectus. Suspendisse consectetur purus tortor, ut consequat sapien
	vulputate ac. Cras tellus felis, faucibus ac tellus et, pretium pulvinar sapien. Duis blandit
	odio ipsum, eget porttitor lacus malesuada at. In est justo, vehicula nec consectetur sed, accumsan
	eu est. Interdum et malesuada fames ac ante ipsum primis in faucibus.
	</p>
	</div>
	<div id="scroll-up-control"></div>
	<div id="scroll-down-control"></div>
	</div>
	<script>
	const content = document.getElementById('content');
	let currentInterval = null;
	function scrollVertically(value) {
	currentInterval = setInterval(() => content.scrollTop += value, 0.1);
	}
	const scrollUpControl = document.getElementById('scroll-up-control');
	scrollUpControl.addEventListener('mouseenter', () => scrollVertically(-1));
	scrollUpControl.addEventListener('mouseleave', () => clearInterval(currentInterval));
	const scrollDownControl = document.getElementById('scroll-down-control');
	scrollDownControl.addEventListener('mouseenter', () => scrollVertically(1));
	scrollDownControl.addEventListener('mouseleave', () => clearInterval(currentInterval));
	</script>
	</body>
	</html>