通过设置 overflow 属性启用滚动,同时利用 ::-webkit-scrollbar 来隐藏滚动条(此伪元素只适用于 WebKit 内核的浏览器,如 Chrome 和 Safari)。 实现步骤: /* 隐藏滚动条,启用滚动 */.scrollable{overflow:scroll;/* 或者 overflow: auto */}/* 针对 WebKit 浏览器隐藏滚动条 */.scrollable::-webkit-scrollbar...
方法1:计算滚动条宽度并隐藏起来 在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。 下面给一个简化版的代码 ... .outer-container{width:360px;height:200px;position: relative;overflow: hidden; }.inner-co...
CSS隐藏滚动条并可以滚动内容 前言:当我们的内容超出了我们的 div,往往会出现滚动条,影响美观,尤其是当我们在做一些导航菜单的时候,滚动条一出现就破坏了 UI 效果。我们不希望出现滚动条,也不希望超出去的内容溢出,就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况,最容易想到的是加一个 iscroll 插件,但...
css实现隐藏滚动条并可以滚动内容 前言 方法一、计算滚动条宽度并隐藏起来 方法二、css隐藏滚动条 前言 当页面的html结构嵌套的盒子很多的时候,可能会导致一个页面中含有多个垂直滚动条。 这样的话很影响页面的样式,所以我们需要隐藏滚动条的同时还支持滚动,下面就是利用css实现的两种方法。
实现方式有很多种,可以用iscroll插件,也可以用css去解决 01 方法1-计算滚动条宽度并隐藏起来 这种方法主要是通过计算滚动条宽度,给隐藏起来的,如下示例所示 具体片段代码如下所示 代码语言:javascript 复制 <template>itclanCoder,https://coder.itclan.cn,itclan.cn,书以启智,技于谋生,活出斜杠 itclanCoder,http...
移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar {display: none; } AI代码助手复制代码 PC 端 PC 端对兼容性的要求相对来说要高一点,所有可以换一种方法,大致思路就是在内容div外面包一个父容器div,设...
垂直滚动,用鼠标滚轮滚动 <!DOCTYPE html> .parent { height: 80px; width: 100px; overflow: hidden; } .content{ height: 80px; width: 126px; /* 多出26像素是滚动条的位置,会被父容器盖住就看不到了 */ overflow-x: hidden; overflow-y: scroll; } 整一长段文章进来看效果 ...
滚动条的css样式主要有三部分组成: 1、::-webkit-scrollbar定义了滚动条整体的样式; 2、::-webkit-scrollbar-thumb滑块部分; 3、::-webkit-scrollbar-thumb轨道部分; 下面以overflow-y:auto;为例(overflow-x:auto同) 更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用overflow:hidden隐藏滚动条...
=== 2024-07-18 如果上面的不生效,不妨再试试下面这个 === /*隐藏滚动条,但仍然可以滚动*/-ms-overflow-style: none;/*IE and Edge*/scrollbar-width: none;/*Firefox*/&::-webkit-scrollbar{/*Webkit browsers*/display:none; }