<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
.cont {
position: relative;
border: 1px red solid;
width: 400px;
margin: 10px;
}
.text {
position: relative;
margin: 5px;
max-height: 200px;
border: 1px blue solid;
overflow-y: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.cont').forEach (cont => {
const etext = cont.querySelector('.text')
const cbut = cont.querySelector('.center-btn')
if (etext.scrollHeight<=etext.clientHeight) {
cbut.style.visibility = 'hidden';
} else {
cbut.innerHTML = etext.scrollTop + etext.clientHeight < etext.scrollHeight? 'Вниз' :'Вверх'
etext.onscroll = () => {
cbut.innerHTML = etext.scrollTop + etext.clientHeight < etext.scrollHeight? 'Вниз' :'Вверх'
}
}
})
})
</script>
</head>
<body>
<div class=cont>
<div class="text" style="overflow-y: auto;">
<h3>Title</h3>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
</div>
<div class="btns">
<button>Left btn</button>
<button class="center-btn">Center btn</button>
<button>Right btn</button>
</div>
</div>
<div class=cont>
<div class="text" style="overflow-y: auto;">
<h3>Title</h3>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
<span>text text text</span><br>
</div>
<div class="btns">
<button>Left btn</button>
<button class="center-btn">Center btn</button>
<button>Right btn</button>
</div>
</div>
</body>
</html>
Как то так.
Принцип такой, а красоту сами наведете.