使用JavaScript的HTML5滚动条百分比位置

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JavaScript的HTML5滚动条百分比位置相关的知识，希望对你有一定的参考价值。

This javascript gets you the percentage position of the browser's scrollbar.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<title>Get Scrollbar Percentage</title>
  7.  
  8. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  9.  
  10. 		<script>
  11.  
  12.  
  13. 			$(document).ready(function() {
  14.  
  15. 				$(window).scroll(function(e){
  16. 					var scrollTop = $(window).scrollTop();
  17. 					var docHeight = $(document).height();
  18. 					var winHeight = $(window).height();
  19. 					var scrollPercent = (scrollTop) / (docHeight - winHeight);
  20. 					var scrollPercentRounded = Math.round(scrollPercent*100)/100;
  21.  
  22. 				    $('#scrollPercentLabel>span').html(scrollPercentRounded);
  23. 				    repositionLabel();
  24. 				});
  25.  
  26. 				$(window).resize(function(){
  27. 					repositionLabel();
  28. 				});
  29.  
  30. 				function repositionLabel() {
  31. 					$('#scrollPercentLabel').css({
  32. 						position:'fixed',
  33. 						left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
  34. 						top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
  35. 					});
  36. 				}
  37.  
  38. 				repositionLabel();
  39.  
  40. 			});
  41.  
  42. 		</script>
  43.  
  44. 		<style>
  45.  
  46. 			body {
  47. 				background-image: url('http://subtlepatterns.com/patterns/crissXcross.png');
  48. 				margin: 0px;
  49. 				padding: 0px;
  50. 			}
  51.  
  52. 			#fakeHeight {
  53. 				height: 6000px;
  54. 				width: 1px;
  55. 			}
  56.  
  57. 			#scrollPercentLabel {
  58. 				font-family: Impact;
  59. 				font-size: 50px;
  60. 				color: #2B2B2B;
  61. 				background: rgba(255, 255, 255, 0.5);
  62. 				padding: 20px;
  63. 				position: absolute;
  64. 				top: 50%;
  65. 				left: 50%;
  66. 				box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
  67. 				border-radius: 15px;
  68. 			}
  69.  
  70. 		</style>
  71.  
  72. 	</head>
  73.  
  74. 	<body>
  75. 		<p id="fakeHeight"></p>
  76. 		<p id="scrollPercentLabel">scrollPercent: <span>0</span></p>
  77. 	</body>
  78.  
  79. </html>

以上是关于使用JavaScript的HTML5滚动条百分比位置的主要内容，如果未能解决你的问题，请参考以下文章

原生JavaScript实现滚动条

怎样用div实现带百分百环形进度条

滚动到时播放 HTML5 视频

padding和width百分比使用时要注意滚动条的出现

滚动百分位函数在列中输出 0？

使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸