js学习事件-----js模仿手机下拉刷新（1）

最新推荐文章于 2026-07-27 08:01:09 发布

原创

最新推荐文章于 2026-07-27 08:01:09 发布 · 2.4k 阅读

本文介绍了一个自定义滚动条的实现方案，包括CSS样式设置及JavaScript事件处理。通过手动控制滚动条来实现平滑滚动效果，并展示了如何监听鼠标事件以实现顶部提示功能。


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>require AMD</title>
    <style>
        /*重置css*/
        body,html,ul,ol,li{padding: 0;margin: 0;border: none;}
        ul,ol{list-style:none;}
        a{-webkit-transition: all .2s; text-decoration:none;color:#333;
        }

       #content{position:absolute;height: 300px;width: 200px;border: 1px #000000 solid;
           background-color:#f0ad4e;overflow: hidden;}
       #sc{height:100px;width:100px;top:20px;left:50px;background: #1dc116;
          overflow-y:auto;overflow-x: visible;
       }
       .list{position: absolute;width: 100%;height: 100%;top:0px;background-color:white;}
       .list li {position: relative;}
       .list li a.more{
           position: absolute;
           bottom:0px;
           right:10px;
       }
       .list li .img{margin-right: -60px; float: left; margin: -1px 0;}
       .list li .show{margin-left: 65px;word-break:break-all;
           font-size:12px;
           line-height:20px;
           color:#666;
           padding-right:10px;

       }
       .list li .img img{width: 50px; height: 50px;}
       .list li{border-bottom: 1px solid #B6B6B6; overflow: hidden; padding: 5px 0;}
       /*滚动条*/
       .scrollbar {
           position: absolute;
           top: 0px;
           right: 0px;
           bottom: 0px;
           width: 2px;
           background: #000000;
       }
       .scrollbar .handle {
           width: 100%;
           height: 100px;
           background: #40AA53;/*拖动条*/
           cursor: pointer;
       }
       .scrollbar .handle .mousearea {
           position: absolute;
           top: 0;
           left: -5px;
           width: 12px;
           height: 100%;
       }
       /*顶部消息提示框*/
        .topTips{
            z-index : 999;
            overflow : hidden;
            height : 0px;
            font-size: 12px;
            line-height: 0px;
            position : absolute;
            width: 100%;
            background: #F5F5F5 url("http://git.oschina.net/assets/logo-white.png") no-repeat right 40px bo

标签