模拟垂直滚动条,增加内容可滑动

模拟垂直滚动条,效果如图所示

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin:100px;
            position: relative;
            overflow: hidden;
        }
        .content {
            height: auto;
            padding: 5px 18px 5px 5px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .scroll {
            width: 18px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #eee;
        }
        .bar {
            width: 100%;
            height: 100px;
            background-color: red;
            cursor: pointer;
            border-radius: 10px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="box"><!--内容可视区-->
    <div id="content" class="content" ><!--内容区-->
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果
     你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的
     小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你
     是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小
     苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是我的小苹果你是
     我的小苹果你是我的小苹果******
    </div>
    <div id="scroll" class="scroll"><!--滚动条所在区域-->
        <div id="bar" class="bar"></div><!--滚动条-->
    </div>
</div>
</body>
</html>
<script src="common.js"></script>
<script type="text/javascript">

</script//滚动比例:内容向上走的距离 / 滚动条向下滚动距离 = 内容高度-可视区高度 / 可视区高度 - 滚动条的高度
    let $bar = $('#bar');
    let $scroll = $('#scroll');
    let $content = $('#content');
    let $box = $('#box');

    $scroll.onmousedown = function (e) {
        e = e || window.event;
        let y = e.offsetY;
        let maxY = $scroll.clientHeight - $bar.offsetHeight;
        document.onmousemove = function (e) {
            e = e || window.event;
            let t = e.pageY - $box.offsetTop - y;
            t = t < 0 ? 0 : (t > maxY ? maxY : t);
            $bar.style.top = t + 'px';
            //内容区滚动
            let stop = t * ($content.offsetHeight - $box.clientHeight) / ($box.clientHeight - $bar.offsetHeight);
            $content.style.top = -stop + 'px';
            // return false;//防止拖动滑块的时候把文字选中
        }
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    }

return false很重要

common.js

//  判断数组是否还有这个元素
function include(arr, item) {
    for(var i = 0; i < arr.length; i++) {
       if(arr[i] === item) {
           return true;
       }
    }
    return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return i;
        }
     }
     return -1;
}

// 任意区间随机整数
function getRandom(max, min) {
    min = min || 0;
    if(min > max) {
        var a = min;
        min = max;
        max = a;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

// 数组去重
function noRepeat(arr) {
    var __arr = [];
    for(var i = 0; i < arr.length; i++) {
        // 存在返回true, 不存在返回false
        var bool = __arr.indexOf(arr[i])
        if(bool == -1) {
            __arr.push(arr[i]);
        }
    }
    return __arr;
}

function $(ele) {
    return document.querySelector(ele);
}
function $A(ele) {
    return document.querySelectorAll(ele);
}

function getRandomColor() {
    var str = '0123456789abcdef';
    var color = '#';
    for(var i = 0; i < 6; i++) {
        color += str[getRandom(str.length - 1)];
    }
    return color;
}

// 格式化url, 获取参数
function parseUrl(url) {
    var obj = {};
    url = url.split('?')[1].split('#')[0];
    url = url.split('&');
    url.forEach(function (x) {
        var arr = x.split('=');
        obj[arr[0]] = arr[1];
    })
    return obj;
}

// 获取非行内样式
function getStyle(ele, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr]
    }
    return ele.currentStyle[attr];
}

原文地址:https://www.cnblogs.com/web-learning/p/10499999.html

时间: 2024-10-12 10:36:28

模拟垂直滚动条,增加内容可滑动的相关文章

模拟垂直滚动条

模拟垂直滚动条,效果如图所示 html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; height: 500px; border: 1px solid red; margin:100px; position: rel

css 内容溢出显示垂直滚动条,内容不超出就不显示滚动条

<div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .div1{ width:200px; height:100px; overflow-y:auto; }

修改Wordpress-4.0的文章编辑区内容(MCE控件)跟随最外面垂直滚动条滚动的问题

我架设的本地Wordpress-4.0,用于收集有用的文章. 恼火的是, 当粘贴的内容很长时, 文章编辑区MCE控件不出现垂直滚动条, 倒是最外面的窗口出现了滚动条, 这种情况下, 当前视图位置定位到编辑区底部,看不到标题输入input 每次都必须鼠标拖动窗口滚动条 使得标题输入input出现 最好的解决方法自然是修改CSS,不过,这个目前不知道在什么地方修改 有一个简单的办法是: 在最上方的admin-bar里添加一个按钮,称为"回到顶部" 然后设置其href属性为"jav

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

自己写一个jQuery垂直滚动条插件(panel)

html中原生的滚动条比较难看,所以有些网站,会自己实现滚动条,导航网站hao123在一个侧栏中,就自定义了垂直滚动条,效果比较好看,截图如下: 这个滚动条,只有在鼠标悬停在这个区域内时才显示,半透明效果,很节省空间的说~~,说实话,这个效果我非常喜欢. 垂直滚动条的原理,简单来说: 先起个名字,外层的叫wrapper,内层的叫content,wrapper需要有非static的定位,content需要绝对定位,这样就可以通过调节top值来模拟内容滚动. 具体说一下: 1.wrapper的ove

FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)

即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字体模式(一般适用于移动端显示,iOS,Android): 大间距模式(FineUIMvc v1.3.0新增显示模式): 可见,大间距模式和大字体模式类似,但是文字大小还是默认的 13px,而不是大字体模式的 16px. 这个新增的模式对那些显示内容不多的客户非常受用,当然也适合于密集恐惧症患者~_~

Java swing 如何让垂直滚动条始终在最下面

见图说话: 上图中箭头所指的是一个JTextPane JTextPane 被包在JScrollPane 中 //执行结果显示窗口 resultTextPane = new AssistPopupTextPane(); resultTextPane.setContentType("text/html; charset=UTF-8"); resultTextPane.setEditable(false); DefaultCaret caret = (DefaultCaret)resultT

jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部

转自:http://blog.163.com/[email protected]/blog/static/1284651702010894509982/ 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全.正确搞明白的. 我知道很多人不同意我的观点.但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是关于滚动条外观和滚动条插件的.我最近在制作一个滚动条相关的页面效果,去 CSDN 论坛里提问,得到了一段代码,还是错误的. jQuery 里和滚动条有关的概念很多,但是

unity3d v5.1.1 ugui 带垂直滚动条的文本框

http://www.cnblogs.com/zhaoqingqing/p/3973167.html?utm_source=tuicool http://blog.csdn.net/rcfalcon/article/details/43459387 看了这两篇帖子,还是他妈的不知道怎么做,但第一个帖子的作法我已经实现了帖子内容,第二个帖子完全实现不了,于是把第一帖和第二帖的内容结合起来搞定了,我就操了,一个带垂直滚动条的文本框都这么难做,能不能提供现成的? 一.在Canvas新建一个Panel,