Question

如何获得用户所在的当前div内滚动位置的百分比？在具有多个文本屏幕的单个html页面中具有一些div。

因此，当用户位于div的开头时，应为0％，而当用户滚动到div的中间时，应为50％，最后滚动至100％。如果他超出了下一个div，它将像以前一样相对于新div重置为0％。寻找css / and或javascript解决方案（而不是jquery）。

想在粘性标头中使用此信息。

Answer 1

您可以通过以下方式获取页面的当前位置：

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

然后，您需要获取div的位置和高度并计算百分比。

以下是有关如何获取滚动事件的示例： https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollleft

Answer 2

您可以使用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循环来遍历每个DIV。

编辑：

如果没有jQuery选项，则可以执行以下操作：

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

然后，您将以相同的方式进行计算。

Answer 3

我认为这应该可行，这是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;
}

获取当前div内容的百分比

3 个答案: