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

Posted 2021-05-24

tags:

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

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

	&lt;head&gt;
		&lt;meta charset=&quot;utf-8&quot;&gt;
		&lt;title&gt;Get Scrollbar Percentage&lt;/title&gt;

		&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;&gt;&lt;/script&gt;

		&lt;script&gt;


			$(document).ready(function() {

				$(window).scroll(function(e){
					var scrollTop = $(window).scrollTop();
					var docHeight = $(document).height();
					var winHeight = $(window).height();
					var scrollPercent = (scrollTop) / (docHeight - winHeight);
					var scrollPercentRounded = Math.round(scrollPercent*100)/100;

				    $('#scrollPercentLabel&gt;span').html(scrollPercentRounded);
				    repositionLabel();
				});
	   
				$(window).resize(function(){
					repositionLabel();
				});

				function repositionLabel() {
					$('#scrollPercentLabel').css({
						position:'fixed',
						left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
						top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
					});
				}

				repositionLabel();

			});

		&lt;/script&gt;

		&lt;style&gt;

			body {
				background-image: url('http://subtlepatterns.com/patterns/crissXcross.png');
				margin: 0px;
				padding: 0px;
			}

			#fakeHeight {
				height: 6000px;
				width: 1px;
			}

			#scrollPercentLabel {
				font-family: Impact;
				font-size: 50px;
				color: #2B2B2B;
				background: rgba(255, 255, 255, 0.5);
				padding: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
				border-radius: 15px;
			}

		&lt;/style&gt;

	&lt;/head&gt;

	&lt;body&gt;
		&lt;p id=&quot;fakeHeight&quot;&gt;&lt;/p&gt;
		&lt;p id=&quot;scrollPercentLabel&quot;&gt;scrollPercent: &lt;span&gt;0&lt;/span&gt;&lt;/p&gt;
	&lt;/body&gt;

&lt;/html&gt;

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

【中文标题】使用 HTML5/CSS3 而不是 JavaScript 滚动滚动/羊皮纸【英文标题】：Scrolling a scroll/parchment using HTML5/CSS3 instead of JavaScript 【发布时间】：2014-04-17 03:21:26 【问题描述】：

有没有一种方法可以仅使用 HTML5 和 CSS3 创建一个在视觉上充当scroll/parchment 的框架？目前我已经通过使用 JavaScript 实现了它，但是滚动事件在移动设备上并不经常触发，这使得滚动的页眉和页脚结结巴巴。

var paperHeight = 1710;
var viewHeight = 0;
var scrollTopOffset = 240 - paperHeight;
var scrollBottomOffset = scrollTopOffset - paperHeight;

$(function() 
  $(window)
    .on('resize', function() 
      viewHeight = $(window).height() - $('.container').outerHeight() + viewHeight - $('.footer').outerHeight();
      $('.scroll-view')
        .height(viewHeight)
    )
    .trigger('resize');

  $('.scroll-view')
    .on('scroll', function() 
      $('.scroll-top')
        .css("background-position", "0 " + (paperHeight - scrollTopOffset + $(this).scrollTop()) + "px");

      $('.scroll-bottom')
        .css("background-position", "0 " + (viewHeight + scrollBottomOffset + $(this).scrollTop()) + "px");
    )
    .trigger('scroll');
)

网站：https://pendrokar.github.io/magia-ts/index.html

源码：https://github.com/Pendrokar/magia-ts/

如果您的浏览器滚动不顺畅，我知道如何查看滚动动画的最佳方法是在内容上使用鼠标中键，然后上下移动鼠标。

所以滚动以下列方式起作用。向上或向下滚动内容时，页眉和页脚向相反方向滚动。页眉和页脚显示了将要发生的事情或之前发生的事情的反转图像。 JavaScript 版本使用的背景图像只是原始复制和反转的，使用 CSS3 变换矩阵只需要一张图像。

我认为在溢出的“滚动”元素中使用显示“绝对”或“固定”元素可以实现这一点，但是当内容滚动时，它们都不会使元素停留在它们的位置。

HTML5 Canvas 是另一种选择，但它可能仍然和 JavaScript 一样慢。

【问题讨论】：

【参考方案1】：

您的滚动图像大小超过 0.5 兆字节。

对于移动浏览器来说，这个大小可能太大了，无法处理而不会卡顿。

（特别是因为它被绘制了 3 次。）

尝试使用重量为 56K 的下采样版本的卷轴：