순수 CSS+div 숨겨진 스크롤 막대를 구현하는 방법(코드 예)

이 글의 내용은 순수 CSS+div에서 스크롤바를 숨기는 구현 방법(코드 예시)입니다. 참고할만한 내용이 있으니 참고하시면 도움이 될 것 같습니다.

콘텐츠가 div를 초과하면 스크롤 막대가 자주 나타나 모양에 영향을 줍니다.

특히 일부 탐색 메뉴를 수행할 때는 더욱 그렇습니다. 스크롤 막대의 모양은 UI 효과를 파괴합니다. 우리는 스크롤 막대가 나타나는 것을 원하지 않고 그 너머의 콘텐츠가 추방되는 것을 원하지 않으므로 마우스 스크롤 효과를 유지해야 합니다.

Method

여기에 간단한 방법이 있습니다. 일반적인 아이디어는 div 외부에 다른 div를 배치하는 것입니다. 이 div는 오버플로:숨김으로 설정되어 있습니다.

그리고 콘텐츠 div는 Overflow-y: scroll;overflow-x:hidden;

그런 다음 외부 div의 너비를 내부 div의 너비보다 작게 설정합니다.

이 내부 div에는 실제로 스크롤 막대가 있으므로 마우스의 스크롤 효과에 영향을 미치지 않으며 스크롤 막대를 볼 수 없습니다.

Effect

내부 div 효과:

외부 div 효과 적용 후:

코드

css 코드 :

        .nav_wrap{
            height: 400px;
            width: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        .nav_ul{
            height: 100%;
            width: 220px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .nav_li{
            border: 1px solid #ccc;
            margin: -1px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            width: 200px;
        }
        .btn_wrap{
            text-align: center;
        }

html 코드:

        <div>
        <ul>        
            <li>我是菜单1</li>
            <li>我是菜单2</li>
        </ul>
    </div>

이전 프로젝트의 메뉴에서는 이 기술을 사용했습니다. 해당 프로젝트에서는 iframe을 사용했습니다. 또한 스크롤 막대를 덮습니다.
오늘은 현재 작업 중인 프로젝트의 탐색 메뉴에서 스크롤바를 편리하게 제거했습니다. 간단히 요약하자면

위 내용은 순수 CSS+div 숨겨진 스크롤 막대를 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!