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

bigdevil_s 发布于2019-08-22 16:26 / 2019人阅读

摘要：应用场景在做动态创建目录的时候，选择的条目不在可视区域，如图默认情况滚动条都是在最上面的，导致超出可视区域的选择条目没有呈现在可视区域，因此要脚本处理下。

难度系数：简单

关键词：length outerHeight position

前言

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

判断选择的元素是否存在用length;

获取元素的高度height()与outerHeight()的异同；

判断元素位置position()与offset()的异同。

应用场景：

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

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

设置父容器相对定位

ul{
    postion:relative;
}

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

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);
            }
        }
    })
}

GPU云服务器云服务器可视区域判断可视区域 html可视区域区域可视化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94348.html

面试官(6): 写过『通用前端组件』吗?

摘要：很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来往期面试官系列(1): 如何实现深克隆面试官系列(2): Event Bus...

waltr 2019-05-27 17:43 评论0 收藏0
全面提升企业的主动防御能力，UCloud全新架构云安全中心正式公测！

摘要：面对新的安全形势，传统安全体系遭遇瓶颈，需要进一步提升安全运营水平的同时，迫切需要开展主动防御能力的建设。近日，基于云安全底层的打磨整合，重磅推出了全新架构的云安全中心。近年来，全球范围内频发安全事件，我国对网络安全也愈发重视相继出台多部网络安全相关法律，网络安全在今天越发被重视，各类企事业单位不断加大安全投入，市场中更是应运而生了多款安全产品，但安全产品之间普遍存在数据相互独立，无法关联分...

Tecode 2022-06-28 18:59 评论0 收藏0
判断元素是否在可视区域

摘要：如果要实现图片懒加载需要去判断图片是否在可视区域。判断方法判断一个元素是否在可视区域，我们有通常有两种办法，第一种是使用元素的属性的值和页面的进行对比如果的值小于表示元素在可视区域内。前言图片懒加载在网站运用图片比较多的时候回用到，图片懒加载可以让不在可视区域的图片不去加载，避免一次性加载过多图片导致请求阻塞，提高网站加载速度和用户体验。如果要实现图片懒加载需要去判断图片是否在可视...

Cristalven 2019-08-23 12:21 评论0 收藏0