CSS隐藏滚动条但不影响正常滚动

来自：INLOJV

时间：2018-10-15

阅读：

由于某些原因你可能需要隐藏盒子的滚动条但又要它保持滚动效果。

百度找不到答案，谷歌或许你会找到。我就直接提供demo出来，运行代码来看效果吧。

有两种方法：大体思路是加一个外层div使用overflow:hidden对内层div进行遮蔽，而内层根据不同方法把滚动条挤到外层div的遮蔽范围外。

最后加两句js用于更好地支持各大浏览器当中的显示效果。

方法一

内层div使用overflow:auto;padding-right:17px

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>隐藏滚动条但不影响滚动-overflow+padding-right | INLOJV</title>
    <style type="text/CSS">
	/*
		核心在于 外层 overflow:hidden 内层overflow:auto;padding-right:17px,
		注意box-sizing 属性不要设置成 border-box
		内层的width不合适的话可以单独调整
		边框显示是为了方便识别 body、外层、内层边界
	*/
		*{margin:0;}
		#contAIner-outer{
			height: 100%;
			width: 100%;
			border: 2px solid #66FF99;
			overflow: hidden;
		}
		#container-inner{
			width: 100%;
			height: 99%;
			border: 2px solid #0066FF;
			overflow: auto;
			padding-right: 17px;
		}
		html, body{
			height: 99%;
			border: 2px solid #CC0099;
			overflow:hidden;
		}
    </style>
</head>
<body>
<div id="container-outer">
	<div id="container-inner">
		开始 - inlojv.com<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		到底了<br/>
	</div>
<div>
<script>
	/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
	var parent = document.getElementById('container-outer');
	var child = document.getElementById('container-inner');
	child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
</script>
</body>
</html>

方法二

内层div使用position:absolute;right:-17px

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>隐藏滚动条但不影响滚动-position+right | INLOJV</title>
    <style type="text/css">
	/*
		核心在于 外层 overflow:hidden;position:relative; 内层 position: absolute;right: -17px;,
		内层的width不合适的话可以单独调整
		边框显示是为了方便识别 body、外层、内层边界
	*/
		* {
			margin:0;
		}
		#container-outer {
			height: 100%;
			width: 100%;
			border: 2px solid #66FF99;
			overflow: hidden;
			position: relative;
		}
		#container-inner {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: -17px;
			border: 2px solid #0066FF;
			overflow: auto;
		}
		html, body {
			height: 99%;
			border: 2px solid #CC0099;
			overflow:hidden;
		}
    </style>
</head>
<body>
<div id="container-outer">
	<div id="container-inner">
		开始 - inlojv.com<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		到底了<br/>
	</div>
<div>
<script>
	/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
	var parent = document.getElementById('container-outer');
	var child = document.getElementById('container-inner');
	child.style.right = child.clientWidth - child.offsetWidth + "px";
</script>
</body>
</html>

伪元素与伪类两者都是通过在选择器后附加一个特定的关键字来定义，遵循相似的语法规则，并在 CSS 规则块中设置相应的样式。伪元素能够通过 content 属性添加或替换内容。例如，:

2024-10-18 23:21:01

引言CSS3动画为网页设计带来了丰富的动态效果，使得页面更加生动和吸引人。然而，有时我们希望动画在结束时保持最终状态，而不是回到初始状态。本文将介绍几种方法来实现这一效果

2024-10-18 23:20:50

圆角使用CSS3 border-radius属性，你可以给任何元素制作"圆角"，border-radius属性，可以使用以下规则：
（1）四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下

2024-10-18 23:20:40

CSS3的@media查询是一种强大的功能，允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计，确保网站或应用在各种设备和屏幕尺寸上都能提

2024-10-18 23:20:28

页面布局的三大核心：盒子模型、浮动、定位。盒子模型、圆角边框盒子模型网页布局的核心：通过css摆放盒子。
盒子模型的组成包括：边框、外边距、内边距、实际内容padding：默认顶

2024-10-18 23:20:18

背景：前端的设计效果，越来越炫酷，而这些炫酷的效果，利用css3的动画效果和js就可以实现，简单的代码就能实现非常炫酷的效果。
原理：利用 js监控scrollTop的位置，通过 top定位图片

2024-10-14 19:53:57

一、设置线条样式通过 border-style 属性设置，可选择的一些属性如下： dotted：点线 dashed：虚线 solid：实线 double：双实线效果如下：二、设置边框线宽度① 通过 border-width 整体设

2024-10-14 19:53:45

在网页设计中，表单是用户与网站交互的重要元素之一。为了提升用户体验并引导用户正确填写表单，开发者需要清晰地标识出哪些字段是必填的，哪些是可选的。CSS提供了两个非常有用

2024-10-14 19:53:31

第一种结构：图片是子元素<div> <img src="引入图片地址" alt="" class="Img"></div>方法一：img元素添加 object-fit:coverdiv{　　width: 500px;　　height: 500px;}.I

2024-10-14 19:53:22

css实现四角边框 html： <div class="box" v-for="(item, index) in coldBaseInfo.stationModelList" :key="index" >

2024-10-14 19:53:13

overscroll-behavior 是 CSS 中的一个属性，它用于控制元素在发生滚动时，当滚动范围超出其边界时的行为。这个属性对于改善用户体验特别有用，尤其是在移动端设备上，当用户尝试滚

2024-10-14 19:53:04

背景今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 APIAPI介绍filter说明：
该 API 是一个过滤器，不仅能实现

2024-10-14 19:52:56

Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。要知道，在此前，虽然有 ::-webkit-scrollbar 规范可以控制滚动条，可是，::-web

2024-06-12 11:45:42

前言之前在《CSS之浮动》中，我当时是想一起说说定位的，因为我在很多地方看到有把float和position放在一起讲的，说它们的一些属性值可以使元素脱离文档流，但是没想到在准备内容的

2024-04-23 21:53:56

本文介绍三种使用纯 CSS 实现星级评分的方式。每种都值得细品一番~五角星取自 Element Plus 的 svg 资源<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"

2024-03-15 00:54:05

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属

2024-02-27 16:07:16

在网页设计中，全屏背景图片是一种常见的技巧，可以为网页增添视觉上的冲击力和吸引力。在CSS中，有几种方法可以实现全屏背景图片，本文将介绍其中的最佳实践，并提供具体的代码示例

2024-01-24 21:14:41

在网页设计中，列表是一个常见且重要的元素。通过使用 CSS 列表属性，我们可以对列表的样式和位置进行优化，以提升用户体验。本文将重点介绍两个列表属性：list-style-type 和 list

2024-01-24 21:14:24

随着互联网技术的发展，无缝滚动效果在网页设计中被广泛应用。它可以给用户带来更好的浏览体验，也能增加网页的动感和视觉效果。在本文中，我将介绍几种常用的CSS实现无缝滚动效

2024-01-24 21:13:57

在网页的设计中，常常会遇到鼠标悬停时需要弹出特效的需求，这一特效能够提升用户体验和页面交互性。本文将介绍利用CSS实现鼠标悬停时的弹出特效的技巧和方法，并提供具体的代码

2024-01-24 21:13:39

CSS 3D 变换属性是一种强大的技术，可以通过一些简单的代码实现令人惊叹的视觉效果。其中，最常用的两个属性是 transform 和 perspective。一、transform 属性transform 属性用

2024-01-24 21:13:18

在现代网页设计中，动画效果是非常重要和受欢迎的一个元素。其中，旋转动画可以给网页注入活力和吸引力。本文将介绍如何使用CSS制作旋转动画的具体步骤，并提供一些代码示例。步

2024-01-24 21:13:01

引言：
随着Web前端技术的不断发展，CSS的应用变得愈发广泛，其中包括对元素的变形和动画效果的实现。CSS的transform和transition属性提供了一种简便有效的方式来实现元素的变形

2024-01-24 21:12:44

CSS （层叠样式表）是一种用于描述网页上元素外观和样式的标记语言。在CSS中，有一些属性可以帮助我们调整字间距，使文本更易于阅读和美观。本文将详细介绍两个常用的字间距属性：let

2024-01-24 21:12:28

引言：
在CSS中，选择器是一个重要的概念，它能够帮助开发者准确地选择DOM元素并应用样式。除了常见的元素选择器（如标签选择器和类选择器）之外，CSS还提供了伪类和伪元素这两个选择器

2024-01-24 21:12:10

引言：
在现代网页设计中，网格布局已经成为一种非常流行的布局方式。它可以帮助我们更好地组织页面结构，使其更具有层次感和可读性。本篇文章将介绍网格布局的最佳实践，以及具体

2024-01-24 21:11:54

在前端开发中，布局常常是开发者需要面对的问题，为了更好地控制元素在页面中的位置，CSS 提供了多种布局方式。其中，相对布局是一种非常常用的布局方式，通过使用 position 和 relat

2024-01-24 21:11:38

在网页设计中，常常需要实现一些独特的布局效果来吸引用户的注意力。其中，圆形布局是一种非常常见且有趣的布局效果，可以用来展示图片、图标或者其他内容。本文将介绍实现圆形布

2024-01-24 21:11:20

引言：
在 CSS 中，外边距（margin）是定位元素与其周围元素之间的间距，可以用来控制元素与其他元素的距离，给网页设计带来更多的灵活性和美观性。本文将详细介绍 CSS 外边距的四个属

2024-01-24 21:11:04

倒计时效果是网页开发中常见的一个功能，可以为用户呈现倒计时的动态效果，给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果，并给出详细的实现步骤和代码示例。实

2024-01-24 21:10:47

通常产品列表，我们希望产品图片是在一个盒子内垂直居中，如果图片尺寸未知，且希望保持原来的宽高比例，就涉及到未知高度元素垂直居中的问题。如果不用考虑IE6/7，问题会非

2018-10-04 15:18:42

相信很多朋友都在自己的WordPess程序中，安装缓存插件，比如WP Super case,如果我们在更新WP的CSS样式文件，或者其它文件，比如JS文件等时，我们需要去清除一些缓存来查看效果，那么如

2018-09-24 11:10:36

今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英

2018-09-21 21:04:20

自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式

2018-09-21 20:53:11

之前遇到样式调整，总是用 style ，今天无意间看到有内置的样式。 .brm{border-radius:5px}.brm img{width: 25px;}.brw{border-radius:10px}.mtn{margin-top:5px!import

2018-08-27 20:15:45

一款好看的jQuery+CSS3实现的一天时段动画场景切换特效，不同的时段展示不同的风景，黄昏、白天、日落、夜晚动画场景特效。js代码<script>$(".option").on("click", function()

2018-08-26 20:38:50

CSS3网页滚动瀑布流图片加载动画特效是一款WOW.js基于css3动画库属性制作的页面向下滚动时产生的图片载入动画效果。js代码<script src="js/wow.min.js"></script><script>

2018-08-26 20:35:41

这是一款简单又富有创意的css3立方体方块翻滚404动画特效，用来做网页404错误提示页面非常不错。代码下载：https://pan.baidu.com/s/1ILRFY2qQaZmQwGruh1l83g

2018-08-26 20:28:38

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei

2018-08-26 20:20:32

CSS圆角 border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码： Mozilla/Firefox 和 Safari 3用户将在

2018-08-26 20:12:35

2018-08-19

2020-10-16

2019-11-10

2018-08-13

2019-10-05

2020-10-14

2018-08-14

2020-03-21

2019-11-10

2019-09-18

CSS隐藏滚动条但不影响正常滚动

方法一

方法二

热点内容

免费资源网

在线工具

扫一扫随时看

本站下载频道