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

深碍√TFBOYSˉ_ 2022-04-10 01:23 701阅读 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 条评论，701人围观）

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

相关阅读

相关 div实现可以滚动但不显示滚动条（纯CSS实现）

div实现可以滚动但不显示滚动条（纯CSS实现）想要的效果实现效果的核心代码参考想要的效果想实现滚动效果但是又不想显示滚动条，如下面两

比眉伴天荒/ 2023年01月19日 03:06/ 0 赞/ 549 阅读

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

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

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

相关 HTML滚动条

滚动条第一种方式： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

浅浅的花香味﹌/ 2022年07月11日 01:50/ 0 赞/ 268 阅读

相关滚动条的隐藏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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