js实现一个底部滚动的下拉菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：js实现一个底部滚动的下拉菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
    <style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --bg-color: #222429;
            --primary-bg-color: #333740;
            --primary-color: #2c62f6;
            --text-color: #b1b8ca;
            --text-active: #ffffff;
            --button-hover-bg-color: #2b2e34;
            --border-color: #494d59;
            --dropdown-height: 0;
            --rotate-arrow: 0;
            --translate-value: 0;
            --list-opacity: 0;
            --transition-time: 0.4s;
            --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --border-radius: 1.4rem;
            --list-button-height: 4.6rem;
            --floating-icon-size: 26;
            --floating-icon-top: 0;
            --floating-icon-left: 0;
        }

        html {
            font-size: 62.5%;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: var(--bg-color);
            padding: 1.5rem;
            line-height: 1.4;
        }

        button {
            border: none;
            cursor: pointer;
            background-color: transparent;
            outline: none;
        }

        svg {
            height: 1.6rem;
            width: 1.6rem;
        }

        .text-truncate {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .dropdown-container {
            margin-top: 30vh;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 34rem;
        }

        .dropdown-title-icon,
        .dropdown-arrow {
            display: inline-flex;
        }

        .dropdown-title {
            margin: 0 auto 0 1.8rem;
            text-transform: capitalize;
        }

        .dropdown-button {
            font-family: "Roboto", sans-serif;
            font-weight: 400;
            font-size: 1.7rem;
            display: flex;
            align-items: center;
            padding: 0 1.8rem;
        }

        .dropdown-button svg {
            transition: all var(--transition-time) var(--transition-timing);
            fill: var(--text-color);
        }

        .dropdown-button svg,
        .dropdown-button span {
            pointer-events: none;
        }

        .dropdown-button:hover,
        .dropdown-button:focus {
            color: var(--text-active);
        }

        .dropdown-button:hover svg,
        .dropdown-button:focus svg {
            fill: var(--text-active);
        }

        .main-button {
            height: 5.2rem;
            border-radius: var(--border-radius);
            color: var(--text-color);
            background-color: var(--primary-bg-color);
            border: 0.1rem solid var(--border-color);
            transition: all var(--transition-time) var(--transition-timing);
        }

        .main-button:focus {
            border: 0.1rem solid var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(44, 98, 246, 0.4);
        }

        .main-button .dropdown-arrow {
            transition: transform var(--transition-time) var(--transition-timing);
            transform: rotate(var(--rotate-arrow));
            margin-left: 1.8rem;
        }

        .list-button {
            height: var(--list-button-height);
            transition: color var(--transition-time) var(--transition-timing);
            color: var(--text-color);
            overflow: hidden;
            cursor: none;
        }

        .dropdown-list-container {
            overflow: hidden;
            max-height: var(--dropdown-height);
            transition: max-height var(--transition-time) var(--transition-timing);
        }

        .dropdown-list-wrapper {
            margin-top: 1rem;
            padding: 1rem;
            background-color: var(--primary-bg-color);
            border-radius: var(--border-radius);
            border: 0.1rem solid var(--border-color);
            position: relative;
        }

        ul.dropdown-list {
            position: relative;
            list-style-type: none;
        }

        ul.dropdown-list::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            z-index: 0;
            opacity: 0;
            height: var(--list-button-height);
            background-color: var(--button-hover-bg-color);
            transition: all var(--transition-time) linear;
            transform: translateY(var(--translate-value));
            border-radius: var(--border-radius);
            pointer-events: none;
        }
        ul.dropdown-list:hover::before,
        ul.dropdown-list:hover ~ .floating-icon {
            opacity: 1;
        }

        li.dropdown-list-item {
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
            opacity: var(--list-opacity);
            transition: opacity 0.8s var(--transition-timing);
        }

        .floating-icon {
            height: calc(var(--floating-icon-size) *1px);
            width: calc(var(--floating-icon-size) *1px);
            position: absolute;
            top: var(--floating-icon-top);
            left: var(--floating-icon-left);
            background-color: var(--border-color);
            border-radius: 1rem;
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--transition-time) var(--transition-timing);
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .floating-icon svg {
            fill: var(--text-active);
        }
    </style>
 
</head>
<body>
    <div class="dropdown-container">
        <button class="dropdown-button main-button">
            <span class="dropdown-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
                </svg>
            </span>
            <span class="dropdown-title text-truncate">instagram</span>
            <span class="dropdown-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"></path>
                </svg>
            </span>
        </button>
        <div class="dropdown-list-container">
            <div class="dropdown-list-wrapper">
                <ul class="dropdown-list">
                    <li class="dropdown-list-item">
                        <button class="dropdown-button list-button" data-translate-value="0%">
                            <span class="text-truncate">Linkedin</span>
                        </button>
                    </li>

                    <li class="dropdown-list-item">
                        <button class="dropdown-button list-button" data-translate-value="100%">
                            <span class="text-truncate">Instagram</span>
                        </button>
                    </li>

                    <li class="dropdown-list-item">
                        <button class="dropdown-button list-button" data-translate-value="200%">.........完整代码请登录后点击上方下载按钮下载查看