js是滚动条滑到固定位置_js滚动到指定位置
序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看就懂,我们可以用逻辑来代替一部分技术!这里我们只用到一个属性就可以达到要求,其他根据自己的逻辑判断即可!获取到你最外层的div的id,然后获取属性scrollTop,然后想好逻辑,给scrollTop赋值即可!
1、scrollTop用法
1-1 什么是scrollTop?
向上的滚动距离,或者说滚动出可视区域的距离
1-2 语法
//获得滚动的像素数
var intElemScrollTop =someElement.scrollTop;//设置滚动的距离
element.scrollTop = intValue;
1-3 scrollTop赋值
scrollTop赋值为负数的时候,scrollTop赋值为0;
如果一个元素不能滚动,scrollTop赋值为0;
如果设置超出了容器的可滚动值,scrollTop将会赋值为最大值;
1-4 可否通过设置scrollTop的值 来改变滚动的值,尝试中。。。。。。
尝试结果为:改变srcollTop并不会改变滚动条的位置!
再次尝试发现:改变整体的div的scrollTop可以改变滚动条的位置,上次尝试id值取错!
2、滚动的需求
2-1:点击按钮,使得div中滚动的内容列表中的某一条数据指定!(或者你看微信聊天中“微信”左下角的tabbar,你如果多次点击你就会发现,如下代码就是可以实现微信的这个功能!
可以使用scrollTop 这个属性来完成
前提条件:div中的每条数据的高度是一致的,也就是说每条数据都有一样的高度,这样都可以根据scrollTop = X * Y (X为列表中的那个索引,Y为数据宽度,例如:每条数据的宽度为100px,你想让第五条数据置顶,结果为:4 * 100 = scrollTop;这样,第五条数据就可以置顶了!
我真的不知道该怎么写下去了,我的开发环境里边有状态管理,可以管理一些状态来便利我的书写,并且都是必要的!
我就暂时写一些核心代码吧!有机会的话,录个屏幕会更清晰一些!
我写了一个最简单的逻辑供参考!可以建一个空html文件,然后代码全部复制,在浏览器中打开,即可实现!
Document
1
js是滚动条滑到固定位置_js滚动到指定位置相关推荐
- js是滚动条滑到固定位置_JavaScript 滚动条定位指定位置
当子元素尺寸超过父元素的时候能够出现滚动条. 可能会根据需要将滚动条定位到某处,蚂蚁部落的侧栏导航就具有类似功能. 下面通过代码实例简单演示一下简单定位效果:[HTML] 纯文本查看 复制代码运行代码 ...
- div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. 查 ...
- Query实现将div中滚动条滚动到指定位置的方法,html中offsetTop、clientTop、scrollTop、offsetTop各属性的解释
TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
- js控制页面滚动到指定位置,js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置 最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
- 页面滚动到指定位置导航栏固定顶部
做一个网页时经常会用到导航栏,导航栏对于一个网站来说,地位是举足轻重的,在用到导航栏时,我们经常会用到一个效果,就是当页面滑动到一定的位置时,导航栏需要固定在页面的顶部,这是怎么实现的呢? 下面的代码 ...
- 用startSmoothScroll实现RecyclerView滚动到指定位置并置顶,含有动画。
RecyclerView滚动到指定位置并置顶 RecyclerView本身提供了几个定位的方法,除了手动滑动的scrollTo,smootScrollTo和scrollBy,smoothScrollB ...
- 监听某个区域滚动_监听页面滚动及滚动到指定位置
一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scrollTop就是触发滚轮 ...
- 【小程序】滚动到指定位置
点击按钮滚动到页面内的指定位置. wxml <view class="btn" catchtap="scrollToElement">去报名< ...
- vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
最新文章
- docker 容器无法使用中文 解决方案
- springmvc+jsp引用本地图片文件
- Gcc详解以及静态库、动态库生成
- mysql数据库(3)-查询
- 寻路机器人单片机程序示例_C51独立按键的识别示例程序
- android 弹窗ui,Android 弹出窗口与对话框 UI设计
- Odoo10参考系列--Mobile JavaScript
- java文件按时间排序_如何按日期在java目录中排序文件?
- Pandas 文本数据方法 count( )
- [转载] python面面观单元测试_python 使用unittest进行单元测试
- 第3讲 zend原理剖析
- 注册登录后才可以下载的源码_专注爬虫:20个精心总结爬虫项目,爬虫技术这里强(附源码)...
- Jmeter在Linux下的运行测试
- cad卸载工具_使用感极好的5款软件分享,款款高逼格,下载之后就没舍得卸载...
- 复杂、繁杂、庞杂:图解七种代码耦合类型
- mybatis中更新mysql时间多了一秒
- Git(码云)配置精干版
- Modelica生态工具开发利器——同元软控MWorks.SDK 2.0
- c++17文件系统<filesystem>
- 关于datanode进程无法启动的另一种解决方法 java.io.IOException: Incompatible clusterIDs in /export/servers/hadoop-3.1.