正文

css—溢出隐藏（隐藏滚动条，依旧可以滚动）

名字被占用  2022-02-09  695

关键词：

公司的系统，在PC端可以管理我们的公众号，在发布模块页面时有一个预览功能，呈现页面在手机端的样式。

做法很简单，一会就完成了，但是在预览内容过长时手机外框会有一个滚动条，影响美观，于是就想把它去掉，有一个方法个人觉得很好用，记录下。

思路：写两个 div 嵌套在一起，高度都固定，外面的 div 固定宽度并且 overflow: hidden; 里面的div宽度比外面的稍宽，最好算好滚动条的宽度，overflow-y: auto;

初始实现是：

<!--手机预览-->
<div class="preview-layer">
   <div class="preview-bg"></div>
   <div class="preview-phone">

     <div id="preview-html">

     </div>

   </div>
</div>

结合思路修改：

<!--手机预览-->
<div class="preview-layer">
   <div class="preview-bg"></div>
   <div class="preview-phone">

     <div class="preview-container">
        <div id="preview-html">

        </div>
     </div>

   </div>
</div>

div.preview-container {
        position: absolute;
        width: 230px;
        height: 405px;    
        top: 62px;
        left: 15px;
        border: 2px solid #000;
        border-radius: 5px;
        outline: none;
        background-color: #fff;
        overflow: hidden;
    }

 #preview-html{
        width:247px;
        height:405px;
        overflow-y: auto;
    }

结果如下：

手机端预览

滚动查看预览

移动端隐藏滚动条，css方法

...sp;在PC端隐藏html右侧默认滚动条html{/*隐藏滚动条，当IE下溢出，仍然可以滚动*/-ms-overflow-style:none;/*火狐下隐藏滚动条*/scrollbar-width:none;}/*Chrome下隐藏滚动条，溢出可以透明滚动*/html::-webki 查看详情

html的一个div样式，如何使内容滚动条隐藏，但依旧可以滚动？

需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。2、在index.html中的<head>标签中，加入css代码：<style>::-webkit-scrollbardisplay:none;</style>。... 查看详情

CSS溢出-x：可见；和溢出-y：隐藏；导致滚动条问题

】CSS溢出-x：可见；和溢出-y：隐藏；导致滚动条问题【英文标题】：CSSoverflow-x:visible;andoverflow-y:hidden;causingscrollbarissue【发布时间】：2011-09-1907:13:54【问题描述】：假设你有一些样式和标记：ulwhite-space:nowrap;overflow-x:visible;overflow-... 查看详情

使用溢出时无法隐藏滚动条：自动

】使用溢出时无法隐藏滚动条：自动【英文标题】：can\'thidescrollbarwhenusingoverflow:auto【发布时间】：2013-12-2504:34:26【问题描述】：我有这个CSS：.divbackground-color:red;position:relative;height:414px;overflow:auto;width:902px;margin:0pxauto;我尝试使用... 查看详情

css实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome和Safari），于是想... 查看详情

css怎么设置内容滚动,滚动条隐藏

...条相交处尖角的颜色*/参考技术A貌似不行吧1．overflow内容溢出时的设置overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2．scrollbar-3d-light-color立体... 查看详情

css实现隐藏滚动条但是可以滚动

.cont{width:200px;height:200px;border:1pxsolid#000000;overflow-x:hidden;}.cont::-webkit-scrollbar{display:none;} 查看详情

css实现隐藏滚动条但是可以滚动

.cont{width:200px;height:200px;border:1pxsolid#000000;overflow-x:hidden;}.cont::-webkit-scrollbar{display:none;} 查看详情

css如何实现滚动条隐藏但鼠标仍然可以滚动

...候，有些时候需要元素超出屏幕可以滚动，为了美观需要隐藏滚动条。如果只需兼容chrome和safari，可以使用自定义滚动条的伪对象选择器——：：webkit-scrollbar。　　具体使用即：element::webkit-scrollbar{display:none}或者element::webkit-scro... 查看详情

css实现隐藏滚动条同时又可以滚动(代码片段)

前端切图:css实现隐藏滚动条同时又可以滚动

CSS实现隐藏滚动条同时又可以滚动原始功能：添加伪类之后的功能：完整demo如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>::-webkit-scrollbar{display:none}< 查看详情

隐藏滚动条(代码片段)

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

如何隐藏滚动条但保留溢出表的功能？ [复制]

】如何隐藏滚动条但保留溢出表的功能？[复制]【英文标题】：HowcanIhidethescrollbarbutkeepthefunctionalityformyoverflowingtable?[duplicate]【发布时间】：2020-06-1106:42:50【问题描述】：我创建了一个表格，其中包含一个具有特定最大高度的容器... 查看详情

css隐藏滚动条并且可以滑动

比如有一个div css代码： div{scrollbar-face-color:transparent;scrollbar-arrow-color:transparent;scrollbar-track-color:transparent;scrollbar-3dlight-color:transparent;}div::-webkit-scrollbar{dis 查看详情

css如何隐藏滚动条？

有三种代码输入的方式可以在CSS隐藏滚动条。详细方法如下：方法一:代码如下:htmloverflow-y:scroll;原理：强制显示ie的垂直滚动条，而忽略水平滚动条；优点：完全解决了这个问题,允许你保持完整的XHTMLdoctype.；缺点：即使页面不... 查看详情

css怎么隐藏滚动条

溢出-x：隐藏；不会工作，但溢出-x：滚动；将要？

】溢出-x：隐藏；不会工作，但溢出-x：滚动；将要？【英文标题】：overflow-x:hidden;won\'tworkbutoverflow-x:scroll;will?【发布时间】：2020-05-0413:42:27【问题描述】：我有一个包含各种信息的表格。我正在尝试使它在内容溢出时提供水平... 查看详情

div浮动+盒子模型+溢出隐藏+滚动条(代码片段)

总结: 一、浮动floatfloat：left/right左右clear：left/right/both清除浮动如上图所示：我们完全可以利用12清除浮动，其余浮动来解决，但一定要注意好div之间的位置代码如下：<body><divid="d1"><divclass="z1">这是1</div><... 查看详情