HTML - 隐藏滚动条但可以滚动

深碍√TFBOYSˉ_ 2022-04-10 01:23 706阅读 0赞

**原理: （原理就是遮盖）**

1、如果你把子div的140px宽度移除，你就明白其中的奥妙了。

2、原理就是父元素负责滚动，子元素负责遮盖。

解释:  
父类的div 负责滚动,宽度比子类的宽度窄也就是: `width: scroll(父) < scroll-son`

<html>
    <style>
        .scroll{
            overflow-x: hidden; 
            overflow-y: auto;
            height: 300px;  
            width: 120px; 
            background:red
        }    
        .scroll-son{
            overflow-x: hidden;
            height:100%; 
            width: 140px;
        }
    </style>
    
    <div  class="scroll"> 
        <div  class="scroll-son"> 
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
             <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
             <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
             <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
             <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            
        </div>
    </div>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，706人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现隐藏滚动条但是可以滚动

代码 body::-webkit-scrollbar { display: none; } 示例 css选择器::-webkit-

拼搏现实的明天。/ 2023年10月09日 14:21/ 0 赞/ 47 阅读

相关隐藏div滚动条

溢出隐藏，写两个div，高度都固定，外面的固定宽度overflow: hidden;里面的div宽度比外面的稍宽，最好算好滚动条的宽度，[overflow-y][]: auto

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 02:16/ 0 赞/ 25 阅读

相关 CSS实现隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看

比眉伴天荒/ 2022年12月19日 06:12/ 0 赞/ 177 阅读

相关滚动条的隐藏

<template> <el-container> <div class="zhl-scroll-sider" :style="{heigh

逃离我推掉我的手/ 2022年05月25日 03:16/ 0 赞/ 335 阅读

相关 HTML - 隐藏滚动条但可以滚动

原理: （原理就是遮盖） 1、如果你把子div的140px宽度移除，你就明白其中的奥妙了。 2、原理就是父元素负责滚动，子元素负责遮盖。解释: 父类的div 负责滚

深碍√TFBOYSˉ_/ 2022年04月10日 01:23/ 0 赞/ 707 阅读

相关 Overflow实现隐藏滚动条的同时又可以滚动

.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: to

女爷i/ 2022年03月17日 05:38/ 0 赞/ 328 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 494 阅读

相关 CSS 实现隐藏滚动条滚动

需求：当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 css伪类元素控制 body::-webkit-s

╰半夏微凉°/ 2021年09月19日 01:36/ 0 赞/ 513 阅读

相关隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）

第一种：使用纯css样式属性隐藏滚动条：火狐浏览器的css写法不兼容 <!DOCTYPE html> <html lang="en"> <he

ゝ一世哀愁。/ 2021年09月17日 04:14/ 0 赞/ 387 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 688 阅读