产品条目不在可视区域的处理

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

难度系数：简单

关键词：length outerHeight position

前言

案例很简单，但是对于初学者可以延伸学习下jquery的相关知识点：

  1. 判断选择的元素是否存在用length;
  2. 获取元素的高度height()与outerHeight()的异同；
  3. 判断元素位置position()与offset()的异同。

应用场景：

在做动态创建目录的时候，选择的条目不在可视区域，如图：
场景图

默认情况滚动条都是在最上面的，导致超出可视区域的选择条目没有呈现在可视区域，因此要脚本处理下。代码很简单，如下：

设置父容器相对定位

1
2
3
ul{
    postion:relative;
}

动态创建完dom结构后调用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function setSelectedInView(){
    $('.J-item.selected').each(function(){
        var $this = $(this);
        if($this.length > 0){
            var $item = $this.parent(),
                itemHeight = $item.outerHeight(),
                itemTop = $item.position().top;
            var $container = $item.parent('.J-items'),
                containerHeight = $container.height();
            // 如果该条目元素相对于父级的位置超出可视框高度，设置滚动条
            if(itemTop > containerHeight){
                $container.scrollTop(itemTop - containerHeight + itemHeight);
            }
        }
    })
}