jq滑動(dòng)箭頭跟隨，選項(xiàng)卡功能

qingshanli1988 發(fā)布于2019-08-22 18:18 / 1713人閱讀

摘要：主要實(shí)現(xiàn)功能點(diǎn)擊增加選中樣式，同時(shí)箭頭指向選中上滑列表頁(yè)，超出顯示范圍做處理，默認(rèn)選中第一個(gè)滑動(dòng)時(shí)，箭頭不顯示，添加一個(gè)定時(shí)器后顯示處理結(jié)果文件點(diǎn)擊的高度判斷是否點(diǎn)擊的超出顯示范圍，跑上面了判斷最接近顯示范圍的找到結(jié)束循環(huán)判

主要實(shí)現(xiàn)功能
1.點(diǎn)擊li,增加選中樣式，同時(shí)箭頭指向選中l(wèi)i
2.上滑列表頁(yè)，超出顯示范圍做處理，默認(rèn)選中第一個(gè)
3.滑動(dòng)時(shí)，箭頭不顯示，添加一個(gè)定時(shí)器,500ms后顯示處理結(jié)果
html文件



    
        
        Title

css文件

*{
    box-sizing: border-box;
}
#expert{
    width: 100%;
    height:100vh;
    background: #ccc;
}
#expert .list{
    width: 30%;
    height:100%;
    overflow-y: auto;
    float: left;
}
#expert .list li{
    background: #fff;
    width: 100%;
    height: 100px;
    margin-bottom: 3px;
    border:1px solid #fff;
}
#expert .list .sel{
    border:1px solid #f00;
}

/*隱藏滾動(dòng)條顯示*/
#expert{
    position: relative;
    overflow: hidden;
}
#expert .list{
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;

}
/* for Chrome */
::-webkit-scrollbar {
    display: none;
}
.details{
    float: right;
    width: 68%;
    height: 100%;
    background: #ff0;
    padding-left: 2%;
    position: relative;
}
aside{
    float: left;
    width: 2%;
    height: 100vh;
    background: #0ff;
    position: relative;
    margin-left: 30%;
}
aside .print{
    width: 20px;
    height:20px;
    background: #fff;
    position: absolute;
    right: -10px;
    top:40px;
    transform:rotate(45deg);
}

顯示的內(nèi)容