滚动,你真的懂了吗

在业务中,页面滚动的场景十分常见,

因此对于滚动的充分了解,可以让我们提高开发的效率!

滚动的几种场景

  • 只有window窗体滚动
  • 内滚动布局
  • 窗体滚动+DIV内滚动

这时候,台下观众会问,什么是内滚动布局,什么是window滚动呢?

让我们来了解下哈

只有window窗体滚动

即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。

如手Q吃喝玩乐的站点首页, 在android机上就是使用window滚动

内滚动布局

什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。

(具体为什么ios上和android上会使用不同的滚动方式,可以去了解下=。=)

内滚动布局什么时候会使用了?

  • ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位的问题)

例如,手Q吃喝玩乐的站点首页, 在ios机上便是内滚动布局

  • 桌面软件或者客户端,如群活动
  • 管理系统也有经常使用

窗体滚动+DIV内滚动

这种场景就是,两者都会出现,故计算滚动时最为复杂、

滚动计算基础知识

由于不同浏览器其窗体滚动条的属性获取方式有所差异,故考虑兼容性,我们假设使用了场景是移动到,并且使用了zepto的库

首先,我们想要更好的操作控制条,需了解两个地方

  • 滚动条属性
  • 滚动条调用方法
var $scrollTarget = $(".ui-page");

//若为控制window滚动条
var currenY = $(document.body).scrollTop(); //当前window纵向滚动的位置
var currenX = $(document.body).scrollLeft(); //当前window横向滚动的位置
var Y = 想滚动到的垂直位置;
var X = 想滚动到的水平位置;
$(window).scrollTop(Y);
$(window).scrollLeft(X);

//若为页面内节点的滚动条
var currenY =$scrollTarget.scrollTop(); //当前scrollTarget纵向滚动的垂直位置
var currenX = $scrollTarget.scrollLeft(); //当前scrollTarget横向滚动条的位置
$scrollTarget.scrollTop(Y);
$scrollTarget.scrollLeft(X);

我们可以发现 在这里window滚动比较特殊

其获取滚动属性是用 document.body这个对象,而调用滚动条滚动方法是用window的对象 (不同浏览器其获取浏览器窗体滚动条的方式也存在着差异,大家可以去了解下)

接下来,我们了解下几个重要的属性值

//当前window可视内容区域宽高: 
window.innerWidth
window.innerHeight
//浏览器滚动条偏移值:
$(document.body).scrollTop();
//节点offset值
$("#div").offset().top;
$("#div").offset().left;
//节点的宽高
$("#div").height();
$("#div").width();
//节点的滚动条偏移值
$("#div").scrollTop();

现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值,那么我们来做一个需求把

假设是这个页面

需求描述 : 希望通过点击按钮,使绿色区域的item,能够定位到屏幕中间

这种需求很常见吧~

那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

//相信我们js代码就是这样写的
var itemHeight = 每个item的高度
var itemIndex = 指定item的下标(1, 2,3 ...)
var rightPosY =  itemHeight * itemIndex //使绿色区域的item能滚动到列表可视区域的中间的偏移值;
$(button).on("click", function(){
    $(scrollDom).scrollTop(rightPosY);
});

那么大家就不满意了,举起双手抗议说 :“这个太简单了,如果每个列表item都是高度不一致,且高度未知的呢?

那么问题升级了,我们来考虑下这个问题,如下图分析图

为了使目标节点,移动到内滚动区域的中间线 我们最终需要知道当前目标节点距离中间线的偏移值,然后加上当前滚动区域的滚动条偏移值,便是我们需要滚动条滚动到的偏移值大小了。

即最终偏移值 = 当前目标节点距离中间线的偏移值 + 当前滚动区域的滚动条偏移值;

可知,当前滚动区域的滚动条偏移值即等于 $("#scrollDom").scrollTop();

那么distance 怎么获取呢? 我们可以从上面的分析图得出

    var distance =  $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;

完整代码

  var distance =  $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;
   //算出当前节点在
   var rightY  = $(scrollDom).scrollTop + distance;
   var $(scrollDom).scrollTop(rightY);

只要弄明白了滚动涉及的属性和方法,在业务开发中,则能迅速得到想要的滚动效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏个人随笔

列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

29510
来自专栏程序员的诗和远方

Tips-移动端滑动固顶效果(position: sticky)

先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 pos...

3086
来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

1887
来自专栏42度空间

【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

41514
来自专栏九彩拼盘的叨叨叨

滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限...

662
来自专栏coding

vue.js动画中的js钩子函数

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

823
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

1071
来自专栏梦魇小栈

使用 JavaScript 实现简单的拖拽

首先,对拖拽的元素绑定 mousedown 时间,使其触发对应的函数,获取元素与鼠标的位置。在 document 对象上绑定 mousemove 和 mouse...

923
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

20510
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1473

扫码关注云+社区