隐藏滚动条但仍可以滚动

其实大致思路就是，让里面内容的高度高于外层容器即可，外层容器overflow: hidden,内层overflow: auto

移动端

移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏某元素内容溢出出现的滚动条。

.container::-webkit-scrollbar {display: none;
}

pc端、移动端

PC 端对兼容性的要求相对来说要高一点，我们可以换一种方法，不使用具有兼容性的css属性。

1、在内容容器div外面包一个父容器div，设置 overflow:hidden
2、给内容div设置overflow: auto
3、最后设置父容器div的高度小于内容div的高度就可以隐藏水平方向出现的滚动条了。
4、同理，设置父容器的宽度小于内容容器的宽度可以隐藏竖直方向出现的滚动条。

// html
<div class="hide-scrollbar"><div class="image-wrapper"><img src="@/assets/img/settle/v2/categories.png" alt="热门品类展示"></div>
</div>

// css 1
.hide-scrollbarsize 100% 108pxoverflow hidden// 内容容器比父容器稍高一部分，隐藏出现的横向滚动条.image-wrappersize 100% 125pxoverflow auto// 内容溢出imgsize 1000px 92pxpadding 0 17px

另一种做法( 隐藏水平滚动条 )：
1、在内容容器div外面包一个父容器div，设置 overflow:hidden
2、给内容容器div设置overflow-x: auto
3、padding-bottom （一个正的距离）与 margin-bottom （一个负的距离）相抵

//css 2
.hide-scrollbarsize 100% 108pxoverflow hidden// 内容容器与父容器尺寸一致.image-wrappersize 100%// 配合隐藏横向滚动条用⤵️padding-bottom 10pxmargin-bottom -10px// 配合隐藏横向滚动条用⬆️overflow-x auto-webkit-overflow-scrolling touchimgsize 1000px 92pxpadding 0 17px

如何实现隐藏滚动条但仍可以滚动相关推荐

实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动转载自:http://www.cnblogs.com/alice626/p/6206760.html 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保 ...
html让下拉条消失,CSS 实现隐藏滚动条同时又可以滚动
移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性. 由于只需要兼容移动浏览器( ...
隐藏滚动条但不影响滚动
前情提要:我的子元素的总高度超过了100%,所以会出现滚动条要求:滚动条隐藏,但是还可以滚动,兼容各种浏览器[我测试了谷歌.IE.搜狗.QQ浏览器都是可以的] 代码: html{height: 10 ...
如何隐藏滚动条还能实现滚动的功能
有时候,我们需要用到滚动条的功能,但是又不需要展示出滚动条给用户看这种奇葩的需求,那么我们要怎么来实现呢?下面我提供了两种方案,适用于pc端.也适用与移动端. 第一种方案,通过样式来隐藏原生的滚动条, ...
隐藏滚动条，保留鼠标滚动效果
原作者地址:https://blog.csdn.net/liusaint1992/article/details/51277751 当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是 ...
关于文本输入框隐藏滚动条但是依旧可以滚动的问题
设置了一个高度自适应,有最大高度的textarea文本框,并且可以滚动,但是在移动端上总是会出现黑点,实际上是滚动条的问题,解决方法是在css样式上添加 ::-webkit-scrollbar{dis ...
纯css，div隐藏滚动条，保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的 ...
纯css，div隐藏滚动条，保留鼠标滚动效果
一.使用场景当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保 ...
css div隐藏滚动条，保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

如何实现隐藏滚动条但仍可以滚动

隐藏滚动条但仍可以滚动

移动端

pc端、移动端

如何实现隐藏滚动条但仍可以滚动相关推荐

最新文章

热门文章

如何实现隐藏滚动条但仍可以滚动

隐藏滚动条但仍可以滚动

移动端

pc端 、移动端

如何实现隐藏滚动条但仍可以滚动相关推荐

最新文章

热门文章

pc端、移动端