官方文档写的简单:
Element 接口的
scrollIntoView()
方法会滚动元素的父容器,使被调用
scrollIntoView()
的元素对用户可见。
语法:
element.scrollIntoView();
// 等同于
element.scrollIntoView(true)
element.scrollIntoView(alignToTop);
// Boolean型参数
element.scrollIntoView(scrollIntoViewOptions);
// Object型参数
首先容器滚动,然后
document.geyElementById
或者
document.querySelector
获取指定元素,最够元素调用
scrollIntoView.
参数
alignToTop
可选
一个Boolean值:
如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的
scrollIntoViewOptions: {block: "start", inline: "nearest"}
。这是这个参数的默认值。
如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的
scrollIntoViewOptions: {block: "end", inline: "nearest"}
。
scrollIntoViewOptions
可选
一个包含下列属性的对象:
behavior
可选
定义动画过渡效果,
"auto"
或
"smooth"
之一。默认为
"auto"
。
block
可选
定义垂直方向的对齐,
"start"
,
"center"
,
"end"
, 或
"nearest"
之一。默认为 “start”。
inline
可选
定义水平方向的对齐,
"start"
,
"center"
,
"end"
, 或
"nearest"
之一。默认为 “nearest”。
实际在vue项目中遇到,当通过点击事件调用子组件的元素滚动到可视区域时怎样都无效。
最终发现,这个方法还有一个限制:
需要页面完全加载后再调用
这样,在vue中可以使用
$nextTick
函数,确保页面已渲染完成在去调
scrollIntoView
使滚动到可视区域
实现代码如下
父组件:
showDatePicker(){
if (this.$refs.pickers) {
this.$nextTick(() => {
this.$refs.pickers.showCurrentDate()
showCurrentDate() {
this.$el.querySelector('.active').scrollIntoView({
block: 'start',
})
官方文档写的简单:Element 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。语法:element.scrollIntoView(); // 等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);// Boolean型参数element.scrollIntoView(scrollIntoViewOptions);// Object型参数首先容器
dom.scrollIntoView({
behavior: "smooth",
block: "nearest", //"start",// | "center" | "end" | "nearest", // 默认
inline: "nearest"
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIn...
今天需要做一个点击icon滑动到文章评论区的功能,采用了scrollIntoView,发现在移动端偶现失效了。
代码如下:
commentRef.current.scrollIntoView({
behavior: 'smooth',
思考1 是否由于浏览器bug导致
据这篇博文描述是由于滑动过程中进行了原生事件的监听就会阻断事件继续执行。
因此替换成 scollTo,发现滑动有改善,但是还是有定位不准的问题。
根据这个回答得出可以采用 requestAnimatio
之前在一次开发
中,用到
scrollInto
View方法,但
遇到神奇的事情,居然无法生效。。。。
在一顿猛烈的排查下才发现该方法需要页面完全加载后才能生效,以下是避免踩雷的方法
运用
vue中的this.$nextTick方法
this.$nextTick(()=>{
document.getElementById(target).
scrollInto
View();
利用setTimeout方法
setTimeout(function(){
背景:左菜单栏,右内容栏,点击左菜单栏,右边自动滚动到指定位置,其中右边固定高度,超出显示scroll。
解决:调用scrollIntoView后,再修改下scrollTop
document.documentElement.scrollTop = document.documentElement.scrollTop - 1;
我的框架是react hook 开发
useEffect(() => {
const anchorElement = document.getElementById('current-module'); // 第一步获取到滚动元素
if (selectModuleIndex === 0 && anchorElement) {
anchorElement.scrollTop