一、使用css的overflow属性
我们可以使用css的overflow属性来控制元素的溢出内容。overflow属性有三个参数值：visible（默认值）、hidden、scroll和auto。
1、hidden
这个属性值用于让一个元素以及其子元素被隐藏。如果内容太长，它们将被立即剪切，并隐藏在区域外。
2、scroll
我们可以使用scroll属性值来在一个元素中创建滚动条。当内容太长，不能同时显示在屏幕上时，滚动条可以让我们滚动浏览所有内容。
使用scroll可以实现“隐藏滚动条，但仍能滚动”的效果。我们可以在元素中设置一个固定的高度和宽度，让内容溢出，并使用“overflow:scroll”将滚动条显示出来。
3、auto
最后，我们有一个“auto”属性值。这个属性值规定浏览器应该在必要时自动添加滚动条，例如当内容太大时。当内容不超出容器，就不会出现滚动条。
二、隐藏滚动条
因此，我们可以使用“overflow:hidden”隐藏滚动条。这将隐藏我们的滚动条并禁用滚动。
.隐藏滚动条 {
overflow: hidden;
}
但是，这样的话我们就不能通过滚动条来滚动内容了。因此，我们需要使用另一种方法来实现想要的效果。下面就是一个基本的示例，它使用了“overflow:hidden”隐藏滚动条。
三、仍能滚动
下一个问题是如何让内容仍能滚动。我们可以使用javascript来解决这个问题。我们需要检测用户正在使用的设备类型，因为滚动条在移动设备上是可见的。
下面提供了一个方法，它允许我们控制滚动条的行为。它依赖于jquery库。
$(document).ready(function(){
if(navigator.useragent.indexof('mac os x') != -1 || navigator.useragent.indexof('iphone') != -1 || navigator.useragent.indexof('ipad') != -1){
$('body').css({ 'overflow-y': 'scroll', '-webkit-overflow-scrolling': 'touch'});
} else {
$('body').css('overflow-y', 'scroll');
}
});
当我们在一个pc或android设备上浏览时，这段代码将启用标准滚动条。在苹果设备上，它将使用类似的滚动条，但是会模拟原生的ios滚动条。我们可以通过触摸滚动条或者页面来滚动内容。
当然，这并不是唯一的方法。我们也可以通过css来实现类似的效果，而不需要依赖javascript。我们可以设置元素的高度和宽度，使用“overflow:hidden”隐藏滚动条，然后使用“-webkit-overflow-scrolling:touch”启用惯性滚动。
.启用惯性滚动 {
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
四、结论
在本文中，我们学习了如何使用css隐藏滚动条，但仍能滚动。我们已经介绍了使用overflow属性和javascript来实现这一效果的两种方法。每个方法都有自己的优点和缺点。最终的决定取决于你的需求。如果你需要一个更加灵活和可移植的解决方案，可以使用javascript。如果你只是需要简单的隐藏滚动条并仍能滚动，使用css就可以了。
以上就是css隐藏滚动条但能滚动的详细内容。