jq滑动箭头跟随，选项卡功能-白红宇

jq滑动箭头跟随，选项卡功能

阅读量：6337 次

发布时间：2019-06-22

本文共 1540 字，大约阅读时间需要 5 分钟。

主要实现功能

1.点击li,增加选中样式，同时箭头指向选中li

2.上滑列表页，超出显示范围做处理，默认选中第一个

3.滑动时，箭头不显示，添加一个定时器,500ms后显示处理结果

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;}/*隐藏滚动条显示*/#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);}

显示的内容

图片描述