如何根据滚动百分比移动div
滚动百分比移动div是指根据页面滚动条的位置，通过改变div元素的位置来实现滚动效果。以下是一种常见的实现方式：
- 首先，需要获取滚动条的位置信息。可以通过JavaScript的scroll事件来监听滚动条的位置变化。当滚动条滚动时，触发scroll事件，可以获取滚动条的scrollTop和scrollHeight属性，以及可视区域的高度。
- 计算滚动百分比。根据获取到的滚动条位置信息，可以计算出当前页面滚动的百分比。百分比可以通过如下公式计算：滚动条的scrollTop / (scrollHeight - 可视区域的高度)。
- 根据滚动百分比移动div。通过CSS的transform属性可以实现div元素的平移效果。可以根据计算得到的滚动百分比，将其作为参数传递给transform属性，来移动div元素。具体的CSS样式可以使用translateY()函数，传入一个百分比值来实现纵向移动。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#scroll-div {
width: 200px;
height: 200px;
background-color: lightblue;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="scroll-div"></div>
<script>
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
var div = document.getElementById('scroll-div');
div.style.transform = 'translateY(' + scrollPercent + '%)';
});
</script>
</body>
</html>这段代码创建了一个固定位置的div元素，当页面滚动时，根据滚动百分比来移动div元素。可以根据实际需求修改div的样式和移动方式。
腾讯云相关产品推荐：
- 云服务器（CVM）：提供高性能、稳定可靠的云服务器实例，可用于搭建网站、应用程序等。产品介绍链接
- 云函数（SCF）：无服务器的事件驱动型计算服务，可快速部署和运行代码。产品介绍链接
- 云数据库 MySQL版（CDB）：高性能、可扩展的关系型数据库，适用于Web应用程序和移动应用程序。产品介绍链接
- 腾讯云CDN：内容分发网络，可加速静态和动态内容的传输，提供更好的用户访问体验。产品介绍链接
以上是根据滚动百分比移动div的简要解释和示例代码，希望对你有帮助。
相关·内容
1回答
我希望文本和描述移动取决于有多少的页面滚动。对于第一个div，我设法做到了，但对于其他div，什么都没有发生。当我滚动超过40%来根据滚动移动div时，我怎么能做到这一点？{
.div1, .div2, .div3 { justify-content: centera
浏览 17提问于2019-10-15得票数 2
回答已采纳
我发现以下代码用于在向下滚动页面时跟踪滚动百分比。* 100;
这显示了整个页面的百分比如果我只想要一个特定div的滚动百分比，比如这个例子，当你向下移动页面时，狗碗是如何滚动的。
浏览 0提问于2019-08-01得票数 1
1回答
这两个示例都使用Javascript和SVG路径在滚动上“绘制”元素。它们还根据文档正文的滚动量(滚动百分比)确定绘制路径的长度。(document.documentElement.scrollHeight - document.documentElement.clientHeight);
有人知道如何更改滚动百分比，以便根据div向下滚动的程度来计算滚动百分比吗
浏览 2提问于2020-05-25得票数 1
1回答
<div style="position:absolute; top:60px; left:600px"> </div> 如何使用百分比在html和css中定位div？如上所述，到目前为止，为了在html中定位div，我一直在告诉像素它位于。问题是，当我在像素较少的移动设备上尝试我的网站时，我必须滚动才能看到整个内
浏览 34提问于2020-09-14得票数 1
回答已采纳
我一直在试图了解他们是如何在中实现这些效果的，但到目前为止都没有成功。我甚至不知道谷歌需要什么帮助。有谁会在上面出错，或者把链接放到插件\教程\其他网站上做同样的事情吗？
浏览 4提问于2012-01-19得票数 3
回答已采纳
我想在一个带有overflow: scroll的div中根据滚动量来设置filter: blur(px);属性的动画。我得到了下面的代码，当你滚动到底部时，它会给我一个改变： jQuery(function($) { alert('end reached&
浏览 38提问于2019-10-18得票数 1
在许多web应用程序中，我经常需要一个JS和/或CSS解决方案，它允许我在页面上滚动/向上滚动时更改对象上的CSS值(递增)。它只允许我控制数学的基础上的PX变量，而不是任何百分比相对于屏幕的高度或宽度。对于不同的屏幕大小，这是很重要的。
它与Mobile完全不兼容。
浏览 6提问于2014-06-03得票数 2
是否有一种方法可以根据滚动结束时可见的视图百分比向上或向下移动AppBar。在应用程序中，当滚动结束时，工具栏会被卡在中间。谢谢
浏览 1提问于2015-11-01得票数 1
回答已采纳
我想创建滚动行为，就像可以找到一样。如果你向下滚动页面，你会注意到每当页面移动时，蟹、鲨鱼、波浪等都是动画。如何才能做到这一点？这是脚本还是CSS动画？编辑:文本气泡也会在不同的滚动点处出现和消失。
浏览 6提问于2011-09-03得票数 2
回答已采纳
2回答
我有一个设置了最大高度/宽度的父div。我想知道是否可以将两个子div设置为仅使用CSS即可根据百分比自动调整其高度？HTML： <div id="top"></div><
浏览 0提问于2013-07-10得票数 2
回答已采纳
1回答
我有一个有滚动条的div，但是，当scroll出现时，它在元素之外(见下图)。我想把卷轴放在红色区域内。有可能吗？多么?我没有尝试任何东西，因为我不知道如何开始这个问题，或者找不到类似的问题。
浏览 1提问于2012-08-04得票数 0
回答已采纳
我正试着设置一个div，在向下滚动的时候移动。但是只有-150 of，所以它移动到滚动的方式，当页面返回到顶部时，div将返回完整视图。mydiv.css({ }); });小提琴：
我不能使用动画，因为动画似乎会激发每个滚动事件，所以如果你向下滚动，然后备份，向下滚动动画会触
浏览 2提问于2015-01-14得票数 1
回答已采纳
当我单击滚动条上不是拇指和上下箭头的位置时，滚动条会滚动一定的量。考虑到滚动条的巨大变化以及最小和最大值，.Net如何使用这些值来计算当您单击此区域时应该滚动多少。
谢谢
浏览 0提问于2011-01-06得票数 1
回答已采纳
我只是不确定让div的内容驻留在父服务器之外是否存在编程问题，而且对我来说效果很好。内容在永不重叠，只是偶尔超过父div的宽度。
有什么可能出错的吗？有无障碍问题吗？
浏览 3提问于2015-04-28得票数 0
CSS具有标准行为，当以百分比移动对象时，此百分比表示其父容器(div)的维度。
在使用CSS3 transform: translate3d()时，情况并非如此。如果对X、Y或Z坐标使用百分比值，则百分比表示当前对象的维度，而不是其父对象。现在的问题应该是显而易见的:如果我需要使用CSS3动画和transform: translate3d()将当前对象移动到其动态可重新大小的父对象的维度中，那么我根本不知道该如何做。例如:使用translate3d(
浏览 5提问于2014-07-30得票数 10
回答已采纳
6回答
我在左边有一个div，它包括营业时间和天气。我想要的div滚动向下和向上根据用户如何滚动。所以它会跟随页面上下移动。我该如何尝试呢？这是我的网站
谢谢
浏览 1提问于2012-07-10得票数 62
如何获得元素滚动的百分比，但视口顶部为0%，底部为100%。这段代码向下滚动绿色的.wrapper元素，根据视口顶部设置百分比。z-index: 1;<div
浏览 43提问于2019-07-01得票数 1
所以我正忙着做一个水平滚动的站点。容器div有一个area类。它的宽度是可变的，就像在传统网站上平均div的高度是可变的一样。我的网站是“垂直响应的”，所以我使用了很多百分比值，包括高度，就像你在通常的网站上使用百分比宽度一样。问题是，当我在div.area上使用百分比填充/边距时，它会根据div的宽度而不是高度来计算百分比，甚至在设置padding-top的时候也是如此。这类似于尝试在正常站点的body上
浏览 0提问于2013-03-08得票数 1
回答已采纳
2回答
我的页面有两个按钮(向左滚动和向右滚动)，单击后，页面必须按div宽度左右移动(每个div都有不同的宽度)。这可以用jQuery来完成吗？我不知道如何读取当前div id (靠近边框左侧的一个)，以及如何根据上一个/下一个div的宽度定义滚动(左或右)？
浏览 0提问于2012-12-24得票数 1
回答已采纳
1回答
当您在文本上方的容器中水平滚动时，我正在尝试更改文本。触发器将基于像素或百分比，例如，如果您滚动到图像宽度的20%，则文本将发生变化。 background: pink;}
display: none; text-align: center;<div</e
浏览 1提问于2018-01-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
