scroll、scrollBy和 scrollTo三种方法定位滚动条位置,以及在vue中使用的注意事项

Android View的scrollTo()、scrollBy() 和Scroller类总结 一、View的scrollTo()、scrollBy() 1.scrollTo、scrollBy方法是View中的,因此任何的View都可以通过这两种方法进行移动。首先要明白的是,scrollTo、scrollBy滑动的是View中的内容(而且还是整体滑动),而不是View本身。我们的滑动控件如SrollView可以限定宽、高大小,以及在布局中的位置,但是滑动控件中的内容(或者里面的childView)可以是无限长、宽的,我们调用View的scrollTo、scrollBy方法,相当于是移动滑动控件中的画布 阅读详情

在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll、scrollBy和 scrollTo,三个方法都带两个参数:x(X轴上的偏移量)和y(Y轴上的偏移量)。因此我们只需修改x,y的偏移量来设置滚动条的位置。另外,页面的滚动高度必须在网页加载完成后才能获取到,所以触发事件用onload。

方法一:用scroll方法实现滚动条位于最底端。

1<</CODE>body onload="scroll(0,document.body.scrollHeight) ">

方法二:用scrollBy方法实现滚动条位于最右端。

1<</CODE>body onload="scrollBy(document.body.scrollWidth,0) ">

方法三:用scrollTo方法实现水平滚动条和纵向滚动条均居中。

1<</CODE>body onload="scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)">

虽然使用scroll、scrollBy和scrollTo方法的效果一样,但是彼此之间还是有一些区别的。
经测试如果使用某一确定的位置参数时,不需要带单位,例据顶端300像素:


<</CODE>body onload="scroll(0,300) ">

注意:在vue中使用时,事件触发后,实现页面滚动,需要在nextTick()方法中执行。
      例如:     this.$refs.table.style['justify-content'] = 'flex-start'; //flex布局:项目位于容器开头
                this.$nextTick( () => { //图片列表栏始终左对齐
                    this.$refs.table.scrollBy(document.body.scrollWidth, 0)                 
                })
移动端H5软键盘弹起导致页面布局错乱的系统性解决方案 在移动端Web开发中,视口(Viewport)与布局视口(Layout Viewport)的交互是构建响应式界面的基础。当软键盘弹起时,浏览器对可用视觉空间的重计算机制,常与CSS布局模型产生冲突,导致页面元素被遮挡或发生意外位移,这一现象在需要频繁文本输入的交互场景中尤为突出。其技术价值在于保障核心输入区域的可访问性与布局稳定性,直接关系到用户体验的流畅度。在AI对话、在线客服、表单填写等移动端H5应用场景中,输入框的稳定性至关重要。本文聚焦于移动端Webview中软键盘与页面布局的冲突问题,深入剖析了其 阅读详情

相关推荐

Vue - 详细实现动态改变元素容器(非页面body)滚动条位置,在一个容器内设置滚动条,并通过 js 改变滚动条位置教程(设置指定子元素div的滚动条位置)

Vue-动态改变元素容器(非页面body)滚动条位置(设置指定子元素div的滚动条位置),解决Vue页面固定滚动位置,根据ref来获取元素or组件的滚动条位置,如何设置div滚动条的位置,怎么动态设置滚动器元素容器非页面滚动条的指定位置,vue动态改变指定元素滚动条的位置,vue页面使用keep-alive缓存后,点击进入详情页后返回时发现滚动条位置回到了顶部怎么办,Vue-页面缓存(keep-alive)后滚动条回到了顶部,不在原来的位置了(从详情页返回列表时发现滚动条位置回到了最顶部,并没

🏆 前端领域优质创作者 5278

使用scrollTo、scrollBy、Scroller实现滚动动画

在上一节讲解了layout、offset、的使用,本节说明scrollTo、scrollBy、Scroller。

步行者 1万+

RT-Thread stm32h7使用串口DMA

stm32h7在rtthread中无法使用串口DMA,通过更改驱动代码使其支持串口DMA

qq_35141454的博客 2286

vue+element 学习之路(十三)scrollBy简单实现锚点定位(单向)

这个锚点定位的思路非常简单,代码也非常简单,但是缺点就是不兼容IE9,暂时先以这个为思路分享下方法。 思路: 1.给dom元素设立锚点(这里以ID为锚点); 2.点击瞬间计算页面顶部到达dom的距离。 3.计算页面已经滚动的距离。 4.根据2和3判断需要上滚还是下滚。 5.滚动。 点击事件触发方法,jump的参数即为锚点ID: 源码: <template> <div...

weixin_39327044的博客 7501

NXP(imx8qxp)系列DDR校准以及android镜像烧录

文章目录一、 不得不吐槽以下nxp的这个代码镜像烧写的过程,做得太开源了,导致镜像根本烧录不进去,实属令人头痛。 一、

永不秃头的程序员的博客 5991

Abaqus滞回问题求解—浆锚连接装配式剪力墙滞回模拟

当下土木工程研究生,多数都在从事装配式混凝土构件安全或装配式混凝土构件连接节点力学性能的研究。研究这类问题,几乎脱离不开对有限元软件的使用,Abaqus求解能力非常强大,但模型处理能力相对较弱。装配式混凝土结构的有限元计算与传统现浇结构相比,其节点处理起来相对复杂,计算结果往往需要凸显出连接节点力学特性,所以对建模精程度的要求较高。所以向大家介绍一款工具—HyperMesh软件(一下简称Hm),它是专业的有限元前处理工具,用于处理装配式混凝土构件或连接节点有限元模型比较合适。这篇文章主要介绍如何利用Hm处理

qq_31918049的博客 2902

vue控制滚动条滑到某个位置

设置当前滑动到的距离,window.scrollTop(x,y) 传俩个值。 computed和watch之间的区别:

m0_55315930的博客 1万+

别再浪费主板上的PCIE插槽了!手把手教你用VL805芯片打造高速USB3.0扩展坞

本文详细介绍了如何利用VL805芯片将主板闲置的PCIE插槽改造为高性能USB3.0扩展坞。从芯片选型、电路设计到焊接工艺和系统调试,提供了一套完整的实战指南,帮助用户充分释放硬件潜能,实现高达5Gbps的传输速度。

weixin_27134495的博客 326

Selenium自动化测试中JavaScript执行器的核心原理与实战应用

在Web自动化测试领域,JavaScript是浏览器环境的核心脚本语言,能够直接操作DOM、处理事件并控制页面行为。其原理在于通过浏览器引擎执行代码,实现对页面元素的精准控制。这一技术价值在于能够突破传统自动化工具的交互限制,处理复杂的前端交互场景。在Selenium自动化测试框架中,通过JavascriptExecutor接口,测试脚本可以注入并执行JavaScript代码,从而解决元素点击拦截、动态样式获取、页面滚动等常见难题。本文聚焦于JavascriptExecutor的核心机制,详细解析其参数传递

weixin_33951761的博客 349

SAP ABAP Cloud 发展简史

其中用于云开发的 ABAP,官方术语是 「ABAP in the Cloud」,本文后续叙述方便起见,简称为 「ABAP Cloud」. 它涵盖了标准 ABAP 语言范围的一个子集,只能访问受限的 API,用于构建 SAP BTP ABAP 环境以及 SAP S/4HANA Cloud ABAP 环境上的云解决方案。SAP ABAP 平台是用于 SAP ECC、SAP S/4HANA 和 SAP BTP 等产品的技术平台,也是 ABAP 应用程序的开发和运行环境。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 1393

ArcGIS Pro 制作这种地图海报

ArcMap 版本与 ArcGIS Pro 版本的制图功能相差太多,无论从美观上还是制图效率都远远优于 ArcMap,用了一段时间的 ArcGIS Pro ,真心推荐有条件的大家赶紧试一试!一个软件也能搞定一张不错的海报哦!----吐槽:好的设计真的是门花时间的活,这个教程大概花了我7小时左右,我都忘了我自己教程中截图多少张了!(可能是我速度太慢了)测试数据:阿里云盘分享-----北极海冰数据.https://www.aliyundrive.com/s/SUhsnqfkmXh。

J_Giser的博客 1429

JS--与scroll相关的方法

前言 因为之前的文章里的js有用到scroll的一些方法以及我之前学得有点快,所以我就专门写一篇文章方便自己后期的温故知新!!! 基本了解 首先scroll的方法大致分为两个对象:window对象和element对象,我们先看第一个再看第二个 window对象下的scroll scrollX(等价于pageXOffset,兼容性好一点) window.scrollX这个方法返回文档/页面水平方向滚动的像素值。(文档被剪去的宽度) 用法: var x = window.scrollX; // 如果 scr

weixin_52283867的博客 1605

uboot引导vxworks--t2080调试记录

开发环境: t2080rdb, uboot2015, vxworks7.01. 《VxWorks_7_fsl_t2t4_BSP_Supplement_Guide__SR0620.pdf》描述: 实际上默认创建的vip,profile选项为none时,vip内核配置中是包含了INCLUDE_END选项的。所以在创建vip的时候最好就添加上PROFILE_DEVELOPMENT。 2. 内核参数bootargs是一些网络参数设置=> pri bootargs bootargs=memac(1,0)b109304

珂珂可爱多 2640

scrollTo/scrollBy的区别,scroller的玩法

scrollTo是滚动到指定的位置(绝对位置),view每一次invalidate的时候,滚动的坐标都是相对起始点的。 srollBy 滚动到(相对位置),view的每一次invalidate的时候,滚动的参数都是相对上一次滚动的增加 量。 两者的共同点:都是对容器内容进行滚动,滚动容器里面的所有内容。 比如viewgrop里面有好几个控件,一起开始滚动,一起结束滚动。先看scroller的效

minwenping的博客 917

TI单芯片毫米波雷达1642代码走读(〇)——总纲

前言 近年来,自动驾驶行业发展如火如荼,雷达技术也逐渐从军工封闭圈走向了开放的市场。 毫米波雷达具有全天候探测能力,特别是在雨雪雾天气以及夜间都能可靠工作,并且探测距离相对其他车载传感器非常远,对运动目标非常敏感,价格还低廉,这些特性都使其成为自动驾驶感知层面不可或缺的一环。 现如今的雷达已经不仅仅局限于测距测速测角等传统的功能,雷达技术正在从感知走向认知、从宽带走向超宽带、从二维走向三维四维、从相控阵走向数字阵列、从单通道走向MIMO、从独立工作走向分布式协同、从分立组件走向射频数字一体化。MIMO

3万+

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

自定义 View 之熟记 scrollTo、scrollBy、Scroller 三者区别

博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主威威喵原创,请多支持与指教。 本文首发于此 博主:威威喵|博客主页:https://blog.youkuaiyun.com/smile_running 介绍 今天,我们来讲讲自定义View的基本功,那就是对我们屏幕坐标系的理解。本人画了一张图,咋们凑合看吧,应该不难看懂。 这里做略微的说明,黑色(ViewGroup、父容器)、蓝色(包含的子View)、橙色为手指触摸屏幕的一点。为什么要清楚这张图呢...

wusj的博客 767

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

vue3.0点击事件之scrollTo滚动

具体语法及注释如下 <template> <div> <!-- @ == v-on 事件类型为click scroll为自己定义的事件名字 --> <button @click="scroll">按钮</button> </div> </template> <script> export default { name: "yanshi", methods: { // 没

一句话介绍不了 3946

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

scrollBy与scrollTo的区别

今天遇到一个问题: ①vue项目中,由一个页面进入到另一个页面。滚动条会默认记住前一个页面滚动条的位置; 这时用vue自带的设置滚动条的默认行为;(这个是设置路由跳转时) scrollBehavior(to, from, savedPosition) { return { x: 0, y: 0 } } ②表格在切换分页时,滚动条会默认记住上一页的滚动条的位置,但需求是切换分页滚动...

qq_38180363的博客 922

通过一张图理解 scrollBy()与scrollTo()的区别

通过字面意思,scrollTo是指移动到某一位置,scrollBy该怎么理解呢? 先看一下两者的源码 scrollTo: scrollBy: 根据源码的实现,参数x是水平移动的位置,y是垂直方向移动的位置 scrollBy调用了scrollTo方法; scrollBy是在上一次移动的位置的(mScrollX和mScrollY)基础上进行逸动的; scrollTo是直接移动到(x,y)的位置 需要注意的是,scrollTo和scrollBy都是移动的内容,而不是将View做整体的移动,对于一个TextVi

川川的博客 2526

js - 原生的一些滚动属性和方法(scroll)

原生的一些滚动属性和方法(scroll)

尽日寻春不见春,芒鞋踏遍陇头云。归来笑拈梅花嗅,春在枝头已十分。 3220

js:可能是最全的scroll相关的方法

1、基本API screenLeft 返回相对于屏幕的X坐标。 screenX 返回相对于屏幕的X坐标,同screenLeft。 scrollX scrollX和scrollY分别是文档相对于当前浏览器视口已滚动的距离。 scrollTop,scrollLeft 网页上边被卷去的内容高度。注:只有dom有 获取:element.scrollTop 赋值:element.scrollTop = 20...

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等 3984

前端vue3-手动设置滚动条位置/自动定位

第一,需要等待数据渲染完成后,再调用scrollTop,设置scrollTop=1000,这样页面初始化滚动条位置会改变。从B页面进行xx操作后需要跳转到A页面,并定位到AA职位,上图为A页面。A页面的左侧是div,内层包裹List组件。完整的scrollTop方法如下。第二,找到当前职位的高度,也要。等职位列表数据渲染完成后,获取。

qq_42980244的博客 5747

vue 设置滚动条的位置

vue 设置滚动条的位置 场景:聊天的时候,消息会一条条的发送,但是呢,获取最新的数据只能手动滚动滚动条,那这个时候就想到微信聊天的时候,永远可以看到最后一条消息。 思路:获取div的高度(因为里面是动态的数据) 然后,讲滚动条滚动到指定位置 代码如下: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight // 如果还是不好用的话,就nextTick一下 this.$nextTic

weixin_37699645的博客 6949

vue3 antdesign table组件 内部数据 自动上下滑动实现

vue3 antdesign table内部自动滑动问题

weixin_45450736的博客 1733

关于vue的scrollBehavior(滚动行为)、缓存之前的位置

咱们在实际开发中会遇到一个问题:我们在一个很长的列表页往下拉,然后点击列表中的某一个数据进入到详情页查看。此时我们决定返回列表也继续查看列表。很多情况下,由于列表页的组件已经被销毁,所以我们返回到列表页后页面会置顶,不得不又重新下拉查看列表,这样就做了很多没有必要的操作,也是不符合用户的预期。用户希望当我查看玩详情页以后返回,返回列表页的位置是刚刚浏览的位置这种情况有什么好的解决办法呢?scrollBehavior scrollIntoView

muzidigbig的博客 8129

vue 定位元素 滚动至元素位置 兼容ios 获取元素的位置

1、获取元素的位置 var h = document.querySelector('#id').offsetTop 2、 设置滚动位置 // 此方法适合谷歌浏览器 ie 但不适合ios document.documentElement.scrollTop = h ;//不需要加单位 h 就是当前元素距离顶部的位置 // IOS 兼容 window.scrollBy(0, h); //...

嘿喵财运旺旺 1712
下一篇: vue 不使用select,实现下拉框功能
github_39598787
博客等级 码龄9年 11粉丝 7原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值