关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看

scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。
alignWithTop是true或者是false哦。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。
我们见动图
1037363-20180702143155901-817496486.gif

见代码
1037363-20180702114303182-962935438.png

scrollIntoView还可以实现类似于我们常见的tab切换的效果
1037363-20180702114501101-1539798477.png

一些具体的效果见动图
1037363-20180702114642687-217517925.gif

代码如下
1037363-20180702114813968-1966330965.png
1037363-20180702114931235-240383387.png

使用scrollIntoView实现tab切换和直接使用jq实现tab切换会有什么区别呢?我们来看一下jq中是怎么实现tab切换的吧~~~
首先见动图
1037363-20180702142452190-1627997144.gif
我们再看看实现的代码吧~
1037363-20180702142521919-1385742559.png
1037363-20180702142542454-1081607792.png
1037363-20180702142554791-348932770.png

scrollIntoView实现tab切换与tab切换这两种方法,其实区别就是scrollIntoView切换的内容在html页面流上是存在的,
而tab切换的内容是不存在的,只有切换的时候才会出现。

转载于:https://www.cnblogs.com/smart-girl/p/9253639.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值