当前位置：首页 > article >正文

处理元素卡在视野边界，滚动到视野内

article 2024/12/29 2:58:37

效果图如下：

本示例处理场景：点击底部的折叠面板，展开后移动端滚动条位置不变，导致展开内容在视图外。造成面板展开无内容的错觉。

处理核心API: IntersectionObserver

此API可绑定元素并监听元素是否在视野内。若在视野外则使用scrollIntoView将元素滚动到可视区域内。

 handleCollapseItemIntoView (form) {
      if (form.isActive) {
        const formHeaderEl = form.$el.querySelector('.el-collapse-item__header')
        var options = {
          root: domTools.getScrollParent(form.$el),//根元素————滚动条所在元素，以便操作滚动条
          rootMargin: '0px 0px -20px 0px',//根元素判定是否在视野内的Margin设置
        }

        const intersectionObserver = new IntersectionObserver((entries) => {
          const ratio = entries[0].intersectionRatio
          // 如果 intersectionRatio 为 0，则目标在视野外，
          if (ratio <= 0) {
            intersectionObserver.unobserve(formHeaderEl)
            return
          }
          if (ratio < 1) {
            formHeaderEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
          }
        }, options)
        // 等待面板渲染完成,高度变化再开启监听(内部数据为异步加载)
        setTimeout(() => {
          intersectionObserver.observe(formHeaderEl)
        }, 300)
      }
    },

查看全文

http://www.kler.cn/a/455795.html