Получить процент от текущего содержимого div - PullRequest
Новая
       24

Получить процент от текущего содержимого div

0 голосов
/ 07 декабря 2018

Как получить процент от положения прокрутки внутри текущего div, в котором находится пользователь?Иметь несколько div на одной html-странице с несколькими экранами текста.

Таким образом, когда пользователь находится в начале div, он должен быть 0%, а когда он прокручивается до середины div, 50%,и в конце 100%.Если он выходит за пределы следующего div, он сбрасывается относительно нового div на 0%, как и раньше.ищу решение css / и / или javascript (не jquery).

хотел бы использовать эту информацию в липком заголовке.

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

Вы можете получить текущую позицию страницы с помощью: 

document.getElementsByTagName("html")[0].scrollTop

Затем вам нужно получить позиции и высоту ваших делений и рассчитать процент.

Вот примеро том, как перехватить событие прокрутки: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollleft

0 голосов
/ 07 декабря 2018

Я думаю, что это должно работать, вот HTML: 

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
<div id="box1">Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to 
make a type specimen book. It has survived not only five centuries, but also 
the leap into electronic typesetting, remaining essentially unchanged. It was 
popularised in the 1960s with the release of Letraset sheets containing Lorem 
Ipsum passages, and more recently with desktop publishing software like Aldus 
PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of 
the printing and typesetting industry. Lorem Ipsum has been the industry's 
standard dummy text ever since the 1500s, when an unknown printer took a galley 
of type and scrambled it to make a type specimen book. It has survived not only 
five centuries, but also the leap into electronic typesetting, remaining 
essentially unchanged. It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>
<div id="box2">Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to 
make a type specimen book. It has survived not only five centuries, but also 
the leap into electronic typesetting, remaining essentially unchanged. It was 
popularised in the 1960s with the release of Letraset sheets containing Lorem 
Ipsum passages, and more recently with desktop publishing software like Aldus 
PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of 
the printing and typesetting industry. Lorem Ipsum has been the industry's 
standard dummy text ever since the 1500s, when an unknown printer took a galley 
of type and scrambled it to make a type specimen book. It has survived not only 
five centuries, but also the leap into electronic typesetting, remaining 
essentially unchanged. It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     
</script>
</html>

Вот код JS: 

let box1 = $('#box1');
let box2 = $('#box2');

$('#box1').scroll(function(){
let val =  (box1.scrollTop()/box1.height())*100;
console.log(val+'%');
})

$('#box2').scroll(function(){
let val =  (box2.scrollTop()/box2.height())*100;
console.log(val+'%');
})

Вот CSS: 

#box1{
position:absolute;
overflow:scroll;
height:400px;
width:200px;
background:red;
}

#box2{
position:absolute;
overflow:scroll;
height:400px;
width:200px;
background:green;
left:500px;
}
0 голосов
/ 07 декабря 2018

Вы можете использовать jQuery для получения значений вершины и высоты ваших div (ов): 

var top = $('#yourElement').offset().top;
var height = $('#yourElement').height();

Затем вам нужно получить текущее значение scrollTop: 

var scrollTop = $(document).scrollTop();

ТогдаВы должны использовать эти значения для расчета процента: 

var difference = scrollTop - top;

if((difference > 0) && (difference < height))
    var percent = difference / height;

Что-то в этом духе.Если у вас есть несколько DIV, вам нужно использовать цикл for для запуска каждого из них.

РЕДАКТИРОВАТЬ:

Если jQuery не вариант, вы можете сделать это: 

var el = document.getElementById("yourElement");
var top = el.offsetTop;
var height = el.offsetHeight;
var scrollTop = document.body.scrollTop;

Тогда вы бы рассчитали его таким же образом.

...