web前端 js+css模拟手机端通讯录

最新推荐文章于 2024-07-19 12:58:53 发布

被迫沉入的李恩恩

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量149

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/2301_77033939/article/details/131960821

版权

::-webkit-scrollbar {
	  display: none; /* Chrome Safari */
	}

    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #list{
        height: 100vh;
        overflow: auto;
    }
    #list>li{
        background-color: #fff;
        border-bottom: 2px solid #999;
    }
    #list>li>h3,#list>li>ol{
        line-height: 45px;
        padding-left: 16px;
    }
    #title{
        position:fixed;
        width: 100%;
        line-height: 40px;
        box-sizing: border-box;
        left: 0;
        top: 0;
        padding-left: 16px;
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        color: #a2ff00;
    }
     #letterlist{
     position: absolute;
     text-align: center;
     top: 20%;
     left: 94%;
     }
 
  #letterlist li{
	  width: 20px;
	  height: 20px;
      font-size: 14px;

      }
 .curr{
	 background-color: #a2ff00;
	 color: white;
	 border-radius: 50%;
     }

var list = document.getElementById("list");
	var letterlist = document.getElementById("letterlist");
    var title = document.getElementById("title")
    cityAll.forEach(function (item){
        var h3 = document.createElement("h3");
        var li = document.createElement("li");
        var ol = document.createElement("ol");
		var letterli = document.createElement("li");
		letterli.innerText = item.name;
        h3.innerText = item.name;
        li.append(h3,ol);
        list.appendChild(li)
		letterlist.appendChild(letterli)
        item.citys.forEach(function (city){
            var lie = document.createElement("li");
            lie.innerText = city;
            ol.appendChild(lie)
        })
    })
	document.querySelectorAll("#letterlist li")[0].className = "curr";
    list.onscroll = function (){
        var h3s = document.querySelectorAll("#list h3");
		var letterlis = document.querySelectorAll("#letterlist li");
        for (let i = 0; i < h3s.length; i++) {
			letterlis[i].classList.remove("curr");
            if (list.scrollTop+40 < h3s[i].offsetTop){
			   title.innerText = h3s[i-1].innerText
                //侧边栏赋值class
			   letterlis[i-1].className="curr";
               break;
            }
        }
        
    }