开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何根据滚动百分比移动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的简要解释和示例代码，希望对你有帮助。

相关搜索:通过滚动移动DIV 滚动可滚动div冻结移动内容根据滚动调整div高度根据父位置滚动div 根据页面滚动固定div js div跟随滚动条移动 css div不随滚动条移动溢出滚动框左右移动div 滚动条移动固定的div 根据滚动更改div容器的位置如何让带有可滚动div的div不根据窗口大小滚动超过某个点？根据在另一个元素上的水平滚动移动<div>阻止用户在移动设备上滚动div 在垂直滚动时水平移动DIV 将页面滚动转换为内部div的滚动百分比如何在滚动页面时隐藏移动设备中的div 如何使用python根据标签移动百分比的文件？如何根据滚动和使用javascript更改div的左边距？如何根据javascript中的滚动位置动态改变div的高度？当我触摸水平滚动div时，移动垂直滚动问题(松弛/滞后)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

div设置height:100%;无效的原因

要解决这个问题，先的知道设置height:100%的原理，当你让一个元素的高度设置为百分比高度时，是相对于父元素的高度根据百分比来计算高度。所以当父元素没有高度时，height:100%也就没有高度值，所以我们来设置body高度。

02

前端基础-CSS背景属性

取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认

01

CSS height:100%无效以及替代方案

可以考虑用 vh 或者padding-bottom来替代。。。 https://javascript.shop/height%e7%99%be%e5%88%86%e6%af%94%e4%bb%a5%e5%8f%8a%e9%ab%98%e5%ba%a6%e8%87%aa%e9%80%82%e5%ba%94%e9%97%ae%e9%a2%98/

04

对html与body的一些研究与理解

最近一直构思着写篇关于<html>标签的文章，虽说之前处理过<html>标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。

03

2全屏布局<9>

全屏布局的特点： 1.布局撑满窗口，当浏览器变大的时候，布局也是充满浏览器的窗口 2.滚动条出现在内容区域

02

CSS的奇淫技巧

当一个盒容器的两条边框在边角处相交时，浏览器就会在交点处按某个角度绘制接合线。如果将这个盒容器的width和height设置为0，并为每条边框设置一个较粗的width值和彼此不同的颜色，最终会得到四个被拼接到一起的三角形，它们分别指向不同的方向：

移动端与PC端页面布局区别、background-size 背景图片的缩放

HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。

02

css基础系列

border边框，margin外边距，padding内部距，content内容，width宽度。

04

HTML/CSS 第四章

注：一般实际工作来说标签不需要进行转换，因为大多数情况下都可以选择对应的标签来实现需求行内块较为特殊！！

02

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍（转）

HTML精确定位：scrollLeft,scrollWidth,clientWidth,offsetWidth

02

CSS 技巧一则 -- 不定宽溢出文本适配滚动

在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。

02

实现手淘金刚区类目列表的scroll滑动效果

（1）实现效果其实很简单，利用better-scroll暴露出的两个特性、translateX、Math对象

03

原生IntersectionObserver交叉观察者

前端开发，对于Observer，应该很熟悉，早之前，刚开始开发前端的时候，老是看群里大佬说没有被Observer到，觉得老高大上了。简单解释就是观察者，也就是说没有被监听到，其实跟订阅发布或者观察者模式有点类似。

03

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂：移动端H5知识普及 - fixed定位模式与其他。虽然知识小，但是不得不承认的是，它们很重要~！本文会讲解到fixed的定位模式，另外，关于line-height的细节知识也会在这里提到。另外就是给出网络字体的相关知识，并扯扯美工图设计的基准字体。先要说的话首先本篇会讲解到fixed的定位模式，另外，关于line-height的细节知识也会在这里提到。另外就是给出网络字体的相关知识，并扯扯美工图设计的基准字体。也算是移动端H5知识这个系列的收尾吧~ fixed定位模式 position：

05

可视化格式模型-定位系统

CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。常规流(Normal flow) 常规流，是对 normal flow的直译。流者，动也。偏旁是三点水，说明，跟水有

06

waypoint_使用jQuery Waypoint创建粘性导航标题

在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。

03

滚动条三要素scrollTop clientHeight scrollHeight

插件 https://github.com/inuyaksa/jquery.nicescroll

04

移动端适配大法

前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：

02

网站自适应布局为什么我要抛弃rem，改用vw？

你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。

01

markdown 编辑器实现双屏同步滚动

由于一直在使用 markdown 编辑器写技术文章，所以对于编写体验很敏感。我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好，有些做得马马虎虎。出于好奇，我就打算自己亲自实现一下这个功能。

02

php学习之css常用的属性（三）

(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6940460185323525", enable_page_level_ads: true }); 1.文字属性属性名描述属性值 font-size 文字大小像素（px）、em（倍数）、百分百（%） font-family 字体类型宋体、微软雅黑、黑体等值可以是一个也可以是多个，用英文逗号隔开目的就

03

简单实用的Canvas进度环返回按钮

具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮，并且具有Canvas绘制进度环的效果。大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用data储存并使用css的 content属性实现。 Canvas进度环返回按钮实现方法：确保引入了jquery,下面的代码加入到你的js文件中： var bigfa_scroll = { drawCircle: function(id, percentage, color) { var

06

简单实用的Canvas进度环返回按钮

具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮，并且具有Canvas绘制进度环的效果。

01

Python中的时间序列数据可视化的完整指南

标题中的“完整指南”并不意味着，它有所有的可视化。在这么多不同的库中有这么多的可视化方法，所以在一篇文章中包含所有这些方法是不实际的。

03

Cypress web自动化30-操作窗口滚动条(scrollTo)

web页面的操作，有些元素不在窗口上显示，需滑动滚动条才能显示出来，Cypress 可以使用 scrollTo 操作滚动条的位置。可以根据窗口的位置来滚动，也可以根据屏幕像素或百分比来滚动。

02

CSS Viewport 单位，很多人还不知道使用它来快速布局！

CSS Viewport units(视口单位)在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。

03

想让视频网站乖乖帮你推内容？看看这位小哥是如何跟YouTube斗法的

编译 | AI科技大本营（rgznai100）参与 | reason_W 当下视频网站的火热程度大家都是有目共睹的，因此也产生了一些网红视频博主，比如深受营长喜爱的papi酱以及papitube的各位po主。那么，这些网红是怎样使自己的视频迅速走红的，网站是通过哪些标准向广大吃瓜群众推荐视频的，其中使用了什么算法呢？在视频网站不公开算法的情况下，上传视频的各大网红如何才能抓住视频分发过程中的套路，长期稳定地生产高品质视频内容？这里面到底有没有一条真正可行的路径？还是真的只能靠三俗内容来不断挑战广大

03

CSS样式更改篇——背景Background

上篇文章主要讲述了CSS的基础用法，讲述了如何定义头文件，导入CSS文件，id和class选择器，元素选择器，后代选择器，子元素选择器，兄弟选择器，伪类选择器等等，让大家对CSS选择器有个简单的认识和了解。这篇接上篇文章，继续讲解CSS的基础用法。

03

54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

01

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

03

CSS布局(二) 盒子模型属性

盒子模型的属性宽高width/height 　　在CSS中，可以对任何块级元素设置显式高度。　　如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样；　　如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto。 auto 　　宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽。详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；　　高度设置为a

07

动态渐变彩色文字代码

这里输入文字

CSS代码 @keyframes move { 0% {background-position: 0 0;} 100% { /*宽度固定，如果为百分比背景不会滚动*/ background-position: -300px 0; } } .wrap { /*设置背景渐变色*/ background-image: linear-gradient(to right, red, orange, yellow, green, y

03

手势魅力-设置一个触摸菜单

本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的

04

前端小知识：为什么你写的 height：100％不起作用？

作者：JiaXinYi https://segmentfault.com/a/1190000012707337 这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高度不受%的控制？ 1.百分比宽高的设定按照w3c中的width和height属性，可以明确%设定宽高是根据父元素的宽高来的： http://www.w3school.com.cn/cssref/prdimwidth.asp http://www.w3schoo

05

html+css学习笔记005-font属性0text属性

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终像我这样的人最近总是单曲循环的播放着这首《像我这样的人》听很久都不会觉得腻或许这首歌最大的魅力就是共鸣 “ 像我这样迷茫的人像我这样寻找的人像我这样碌碌无为的人像我这样孤单的人像我这样傻的人像我这样不甘平凡的人世界上有多少人 ” <!DOCTYPE html> <html lang='en'>

03

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

01

css必知的几个底层知识和技巧

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

02

01移动端基本环境和常见问题

一、chrome模拟器（只是模拟尺寸，最终还是需要真机测试） 1、F12手机模拟（emulation） 2、选择或者添加模拟设备二、本地服务区xampp 1、安装本地服务器环境xampp并启动 2、电脑IP和手机IP需要一样（连在同一个网络下）三、视口设置默认不设置viewport一般可视区宽度在移动端是980px width 可视区宽度（number || device-width）安卓对number支持性不好，所以一般用devi

09

CSS样式更改——框模型、定位、浮动、溢出

上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓，这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。

01

如何完成响应式布局，有几种方法？看这个就够了

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

03

padding实现图片等比例自适应

在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。

01

iframe标签属性说明详解[通俗易懂]

Iframe 标签详解<Iframe src=”example.htm” width=”300″ heitht=”100″></IFRAME> example.htm 是被嵌入的页面，标签 <IFRAME> 还有一些可用的参数设置如下： marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=”20″，单位是 pix，下同。 marginheight:网页中内容在表格顶部预留的高度； hspace:网页右上角的的横坐标； vspace:网页右上角的纵坐标； frameborder:是否显示边缘；填”1″表示”是”，填”0″表示”否” scrolling:是否出现滚动条；填”1″表示”是”，填”0″表示”否” 在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢？下面笔者介绍用iframe来实现的方法。 iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。其部分属性简介如下： name：内嵌帧名称 width：内嵌帧宽度(可用像素值或百分比) height：内嵌帧高度(可用像素值或百分比) frameborder：内嵌帧边框 marginwidth：帧内文本的左右页边距 marginheight：帧内文本的上下页边距 scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示) src：内嵌入文件的地址 style：内嵌文档的样式(如设置文档背景等) allowtransparency：是否允许透明明白了以上属性后，我们可用以下代码实现，在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中让iframe自动适应内容的高度

02

吃了吗？来5道css面试题

二者的区别在于：作用对象不同，padding是针对自身的，margin是作用于外部对象的。

02

rem在响应式布局中的应用

最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。关于媒体查询还有媒体查询的一些兼容性问题，网上介绍的很多

04

Monkey基本参数介绍

说到android移动端稳定性测试，大家通常会想到android系统自动Monkey小猴子，通过Monkey命令模拟用户触摸点击屏幕、滑动、系统按键等操作来对设备上的app进行压力测试，来测试应用的稳定性和健壮性。

03

字节前端都知道的CSS包含块规则

包含块是一个非常重要的概念，通常包含块是当前元素的最近祖先元素的内容区，包含块的形成依赖于CSS position属性。

01

Monkey基本参数介绍

说到android移动端稳定性测试，大家通常会想到android系统自动Monkey小猴子，通过Monkey命令模拟用户触摸点击屏幕、滑动、系统按键等操作来对设备上的app进行压力测试，来测试应用的稳定性和健壮性。

02

动态渐变彩色文字代码

演示效果钻芒博客-- 正在加载今日诗词....html代码

闲看儿童捉柳花

CSS@keyframes move { 0% {background-position: 0 0;} 100% { /*宽度固定，如果为百分比背景不会滚动*/ background-position: -300px 0; }} .wrap {/*设置背景渐变色*/ background-image: linear-

01

固定宽高比例盒模型实现方案

常规布局中，我们经常会遇到百分比布局的方式，也经常会遇到宽度与高度都设置百分比的情况，但高度值我们一般很少用百分比。尤其在百分比布局中，可能很多布局你是宽度百分比，高度固定px。对此你可知道原因么？

02

height百分比以及高度自适应问题

1. 你曾经是否说想要高度占页面或者占div百分比无效的问题，相信你也搜索过了，就是说需要设置父亲父亲一直到祖宗html都要设置百分比，才有效果。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭