У меня есть контейнер, у которого есть скролл , как узнать на какое кол-во пикселей вниз я прокрутил его ?
const app = new Vue({
el: '#app',
data: {
scrollTop: null
},
mounted() {
this.$nextTick(() => {
this.scrollTop = this.$refs.container.scrollTop;
console.log(`Прокручено вниз на ${this.scrollTop} пикселей.`);
});
},
methods: {
}
});
.container {
margin: 0 auto;
width: 1200px;
height: 864px;
border: 1px solid red;
overflow-y: scroll;
overflow-x: hidden;
}
.top {
width: 100%;
height: 405px;
background: green;
display: flex;
align-items: center;
justify-content: center;
font-size: 96px;
border-radius: 45px;
}
.text {
font-size: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="container" class="container">
<div class="top">Текст</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos illo mollitia animi harum nemo ut natus eligendi placeat perferendis laudantium at rerum debitis accusantium commodi quod quae nihil, neque iusto!
</div>
</div>