CSS 侧边滑动栏 (大概叫这个吧...)

最新推荐文章于 2022-10-22 16:07:35 发布

AReTrnA

最新推荐文章于 2022-10-22 16:07:35 发布

阅读量2.1k

点赞数 1

分类专栏： HTML CSS JS 文章标签： css javascript js html css3

本文链接：https://blog.csdn.net/yenoxin/article/details/119878765

版权

HTML 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

CSS 侧边滑动栏
(大概叫这个吧...)

介绍：

如果你想在网页的侧边加入滚动条。那你来对地方了。在下面的教程中，我将展示如何使用
HTML、JavaScript 和 CSS 来制作。

HTML 部分

index.html

首先肯定是要连 CSS 和 JS 的。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body>
    <script src="srcoll.js"></script>
</body>

</html>

然后加上div（main 是内容 sb 是侧边栏）

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body>
    <div id="sb"></div>
    <div class="main"></div>
    <script src="srcoll.js"></script>
</body>

</html>

在Body里写入 οnscrοll=“sc()” 这样在滑动是就会执行function sc了(当然，你可以写在javascript里)

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body onscroll="sc()">
    <div id="sb"></div>
    <div class="main"></div>
    <script src="srcoll.js"></script>
</body>

</html>

CSS 部分

style.css

随便写点吧

* {
    user-select: none;
}

body {
    background-color: #000;
}

#sb {
    position: fixed;
    top: 350px;
    right: -150px; /*找个看不见他的地方*/
    height: 240px;
    width: 60px;
    background-color: white;
    border-radius: 50px;
    transition: 0.3s; /*这个可以用 0.3秒 来滑动。*/
}

.main {
    width: 100%;
    height: 500vh;
}

JS 部分

srcoll.js

首先写一个function叫 sc

function sc() {



}

然后写如果滑动条位置大于 n ( n 为数字 )

function sc() {
    if (document.documentElement.scrollTop >= n) {
        
        } 
}

执行将滑动条的位置移出来，而小过n的话再移回去。

function sc() {
    if (document.documentElement.scrollTop >= 500) {
        document.getElementById('sb').style.right = '50px'
    } else { document.getElementById('sb').style.right = '-150px' } 
    //right可以改成left，或者任何地方。当然CSS 也要改，不然就像是飞过去一样
}

完整代码

index.html
srcoll.js
style.css

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body onscroll="sc()">
    <div id="sb"></div>
    <div class="main"></div>
    <script src="srcoll.js"></script>
</body>

</html>

scroll.js

function sc() {
    if (document.documentElement.scrollTop >= 500) {
        document.getElementById('sb').style.right = '50px'
    } else { document.getElementById('sb').style.right = '-150px' }
}

style.css

* {
    user-select: none;
}

body {
    background-color: #000;
}

#sb {
    position: fixed;
    top: 350px;
    right: -150px;
    height: 240px;
    width: 60px;
    background-color: white;
    border-radius: 50px;
    transition: 0.354s;
}

.main {
    width: 100%;
    height: 500vh;
}

整个html档案

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            user-select: none;
        }
        
        body {
            background-color: #000;
        }
        
        #sb {
            position: fixed;
            top: 350px;
            right: -150px;
            height: 240px;
            width: 60px;
            background-color: white;
            border-radius: 50px;
            transition: 0.354s;
        }
        
        .main {
            width: 100%;
            height: 500vh;
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side Bar</title>
</head>

<body onscroll="sc()">
    <div id="sb"></div>
    <div class="main"></div>
    <script>
        function sc() {
            if (document.documentElement.scrollTop >= 500) {
                document.getElementById('sb').style.right = '50px'
            } else {
                document.getElementById('sb').style.right = '-150px'
            }
        }
    </script>
</body>

</html>