CSS 모바일 스크롤 막대 숨기기 및 부드러운 스크롤(코드 예)-CSS 튜토리얼-php.cn

CSS 모바일 스크롤 막대 숨기기 및 부드러운 스크롤(코드 예)

不言

풀어 주다： 2019-01-24 10:19:47

앞으로

5621명이 탐색했습니다.

이 글의 내용은 CSS에서 모바일 스크롤바를 숨기고 부드럽게 스크롤하는 것에 관한 내용입니다. (코드 예시) 필요한 친구들이 참고하시면 좋을 것 같습니다.

HTML 코드는 다음과 같습니다

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端隐藏滚动条解决方案</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .par-type {
        height: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
    }

    .type {
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
    }
    .con {
        width: 640px;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .con>li {
        text-align: center;
        font-size: 16px;
        width: 80px;
        color: #fff;
        list-style: none;
    }

    .par-type ::-webkit-scrollbar {
        display: none;
    }
    </style>
</head>
<body>
    <div>
        <nav>
            <ul>
                <li>推荐</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
            </ul>
        </nav>
    </div>
</body>

</html>

로그인 후 복사

스크롤바를 숨기도록 설정하세요

.par-type ::-webkit-scrollbar {display: none;}

로그인 후 복사

이때 콘텐츠는 정상적으로 스크롤이 가능하며, 스크롤바가 숨겨져 있는 상태입니다. 하지만 iOS에서는 스크롤이 원활하지 않습니다. 이는 사용자 경험에 영향을 미칩니다. 이때 CSS 코드를 추가합니다: -webkit-overflow-scrolling: touch; 다음과 같이 문제를 해결합니다.

.type {
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
    }

로그인 후 복사

그러나 이때 새로운 문제가 나타날 것입니다. 스크롤 막대가 다시 나타납니다! ! !
사용자 경험을 위해서는 부드럽게 스크롤하고 스크롤 막대를 숨기는 것이 가장 좋습니다. 다음으로 확대 트릭을 시작해 보겠습니다. . .
타입 태그에 스크롤바가 나타나므로 다음과 같이 타입을 설정하세요.

.type {
        /*width: 100%;*/
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
        padding-bottom: 20px;
    }

로그인 후 복사

ps:
1 타입의 외부 컨테이너는 높이가 고정되어 있고, 콘텐츠 오버플로는 숨김으로 설정되어 있으며, 모두 유형은 수직입니다. 초과된 콘텐츠는 보이지 않습니다. 즉: Overflow:hidden;
2.padding-bottom은 20px과 동일하며 고정된 값이 아닙니다. 단, 설정한 값이 스크롤 막대를 압착할 수 있을 만큼 충분히 큰 경우에 한합니다. 눈에 보이는 영역 밖으로.

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端隐藏滚动条解决方案</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .par-type {
        height: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
    }

    .type {
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }
    .con {
        width: 640px;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .con>li {
        text-align: center;
        font-size: 16px;
        width: 80px;
        color: #fff;
        list-style: none;
    }

    .par-type ::-webkit-scrollbar {
        display: none;
    }
    </style>
</head>
<body>
    <div>
        <nav>
            <ul>
                <li>推荐</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
            </ul>
        </nav>
    </div>
</body>

</html>

로그인 후 복사

위 내용은 CSS 모바일 스크롤 막대 숨기기 및 부드러운 스크롤(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!