scrollIntoView() 让元素进入可视区域

介绍

DOM元素的 scrollIntoView()方法是一个IE6浏览器也支持的原生JS API,可以让元素进入视区,通过触发滚动容器的定位实现。

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(boolean); // Boolean型参数,true or false
element.scrollIntoView(options); // Object型参数

当参数为Boolean时:

  • 如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 options: {block:"start",inline:"nearest"}
  • 如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的options: {block:"end",inline:"nearest"}

当参数为options对象时,属性有:

  • behavior:定义动画过渡效果, "auto"或 "smooth(平滑滚动)" 之一。默认为 "auto"。
  • block:定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
  • inline:定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

css 平滑滚动

.box {    
    scroll-behavior: smooth; 
}




暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇