国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

產(chǎn)品條目不在可視區(qū)域的處理

bigdevil_s / 2070人閱讀

摘要：應(yīng)用場(chǎng)景在做動(dòng)態(tài)創(chuàng)建目錄的時(shí)候，選擇的條目不在可視區(qū)域，如圖默認(rèn)情況滾動(dòng)條都是在最上面的，導(dǎo)致超出可視區(qū)域的選擇條目沒(méi)有呈現(xiàn)在可視區(qū)域，因此要腳本處理下。

難度系數(shù)：簡(jiǎn)單
關(guān)鍵詞：length outerHeight position
前言

案例很簡(jiǎn)單，但是對(duì)于初學(xué)者可以延伸學(xué)習(xí)下jquery的相關(guān)知識(shí)點(diǎn)：

判斷選擇的元素是否存在用length;

獲取元素的高度height()與outerHeight()的異同；

判斷元素位置position()與offset()的異同。

應(yīng)用場(chǎng)景：

在做動(dòng)態(tài)創(chuàng)建目錄的時(shí)候，選擇的條目不在可視區(qū)域，如圖：

默認(rèn)情況滾動(dòng)條都是在最上面的，導(dǎo)致超出可視區(qū)域的選擇條目沒(méi)有呈現(xiàn)在可視區(qū)域，因此要腳本處理下。代碼很簡(jiǎn)單，如下：

設(shè)置父容器相對(duì)定位 
ul{
    postion:relative;
}
動(dòng)態(tài)創(chuàng)建完dom結(jié)構(gòu)后調(diào)用函數(shù) 
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();
            // 如果該條目元素相對(duì)于父級(jí)的位置超出可視框高度，設(shè)置滾動(dòng)條
            if(itemTop > containerHeight){
                $container.scrollTop(itemTop - containerHeight + itemHeight);
            }
        }
    })
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94348.html

相關(guān)文章

  • 面試官(6): 寫(xiě)過(guò)『通用前端組件』嗎?

    摘要：很久沒(méi)上掘金發(fā)現(xiàn)草稿箱里存了好幾篇沒(méi)發(fā)的文章最近梳理下發(fā)出來(lái)往期面試官系列如何實(shí)現(xiàn)深克隆面試官系列的實(shí)現(xiàn)面試官系列前端路由的實(shí)現(xiàn)面試官系列基于數(shù)據(jù)劫持的雙向綁定優(yōu)勢(shì)所在面試官系列你為什么使用前端框架前言設(shè)計(jì)前端組件是最能考驗(yàn)開(kāi)發(fā)者基本功的測(cè) 很久沒(méi)上掘金,發(fā)現(xiàn)草稿箱里存了好幾篇沒(méi)發(fā)的文章,最近梳理下發(fā)出來(lái) 往期 面試官系列(1): 如何實(shí)現(xiàn)深克隆 面試官系列(2): Event Bus...

    waltr 評(píng)論0 收藏0

  • 全面提升企業(yè)的主動(dòng)防御能力，UCloud全新架構(gòu)云安全中心正式公測(cè)！

    摘要：面對(duì)新的安全形勢(shì)，傳統(tǒng)安全體系遭遇瓶頸，需要進(jìn)一步提升安全運(yùn)營(yíng)水平的同時(shí)，迫切需要開(kāi)展主動(dòng)防御能力的建設(shè)。近日，基于云安全底層的打磨整合，重磅推出了全新架構(gòu)的云安全中心。近年來(lái)，全球范圍內(nèi)頻發(fā)安全事件，我國(guó)對(duì)網(wǎng)絡(luò)安全也愈發(fā)重視相繼出臺(tái)多部網(wǎng)絡(luò)安全相關(guān)法律，網(wǎng)絡(luò)安全在今天越發(fā)被重視，各類(lèi)企事業(yè)單位不斷加大安全投入，市場(chǎng)中更是應(yīng)運(yùn)而生了多款安全產(chǎn)品，但安全產(chǎn)品之間普遍存在數(shù)據(jù)相互獨(dú)立，無(wú)法關(guān)聯(lián)分...

    Tecode 評(píng)論0 收藏0

  • 判斷元素是否在可視區(qū)域

    摘要：如果要實(shí)現(xiàn)圖片懶加載需要去判斷圖片是否在可視區(qū)域。判斷方法判斷一個(gè)元素是否在可視區(qū)域，我們有通常有兩種辦法，第一種是使用元素的屬性的值和頁(yè)面的進(jìn)行對(duì)比如果的值小于表示元素在可視區(qū)域內(nèi)。 前言 圖片懶加載在網(wǎng)站運(yùn)用圖片比較多的時(shí)候回用到，圖片懶加載可以讓不在可視區(qū)域的圖片不去加載，避免一次性加載過(guò)多圖片導(dǎo)致請(qǐng)求阻塞，提高網(wǎng)站加載速度和用戶(hù)體驗(yàn)。如果要實(shí)現(xiàn)圖片懶加載需要去判斷圖片是否在可視...

    Cristalven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<