容器隐藏滚动条，并保持滚动

最新推荐文章于 2022-01-20 10:23:25 发布
最新推荐文章于 2022-01-20 10:23:25 发布
阅读量470 收藏
点赞数
文章标签： css html mac
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44283478/article/details/107156870
版权

容器隐藏滚动条，并保持滚动

目标：有时候做的页面需要隐藏滚动条，但是又想容器能滚动。

  1. ::-webkit-scroll设置滚动条样式，针对浏览器有限
  2. "套娃模式"隐藏掉目标容器滚动条

“套娃模型”

实现：inner是元素的容器，被outter包裹，并且在outter中移动，这样outter就有了滚动条。这时，用container包裹，并设置超出高度隐藏overflow:hidden；

注意：在Mac电脑上还是会有点问题，滚动条会显示在outter底边之上

outter设置padding-bottom: 20px; 足以在任何浏览器中将滚动条顶出container了

unzoa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
隐藏滚动条但不影响滚动
zhumizhumi的博客
11-27 1251
前情提要：我的子元素的总高度超过了100%，所以会出现滚动条 要求：滚动条隐藏，但是还可以滚动，兼容各种浏览器【我测试了谷歌、IE、搜狗、QQ浏览器都是可以的】 代码： html{ height: 100%; width: 100%; overflow: -moz-hidden-unscrollable; } body{ height: 100%; width: 100...
超出容器显示滚动条
weixin_34347651的博客
08-27 695
.scroll { width: 100px; height: 100px; overflow: auto; } 　　 转载于:https://www.cnblogs.com/candy-Yao/p/7439746.html
3种方法实现CSS隐藏滚动条并可以滚动内容
qq_31699161的博客
12-11 2061
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 http://caibaojian.com/hide-scrollbar.html 方法1：计算滚动条宽度并隐藏起来 <div class="outer-container"> <div class="inner-container"> ...... </di
让DOM容器滚动的条件
Suk__的博客
01-20 730
1. 开启滚动: overflow-y: scroll; 2. 固定高度: height: xxxpx; 设置后 只有当内容超出后才会显示滚动条
html固定容器加滚动条,css – Div与滚动条在div内,位置：固定
weixin_31036469的博客
06-10 625
我有一个位置的div：固定是我的容器div一些菜单。我设置为顶部：0px，bottom：0px以始终填充视口。在那个div里面我想要有两个其他的div，其中的较低的一个包含很多行，并有溢出：auto。我会期望它将被包含在容器div中，但是如果有太多的行，它只是在固定的div之外扩展。以下是我的代码和屏幕截图：MyPlan#outerfixed { position:fixed; width:20...
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...
css使用overflow属性控制滚动条的样式
09-22
即使内容宽度超过容器，也不会显示横向滚动条，超出的部分将被隐藏。这对于保持页面布局的整洁非常有用。 4. `overflow-y: scroll` 类似地，`overflow-y: scroll`强制显示垂直滚动条，即使内容可能完全适应垂直...
给大图片添加滚动条
07-20
/* 在小屏幕上隐藏滚动条 */ } } ``` 以上就是如何在网页中为大图片添加滚动条的详细步骤。通过这些技术，我们可以确保用户无论在何种设备上都能轻松查看完整的图像内容。同时，自定义滚动条样式可以提升页面的...
基于JavaScript实现自定义滚动条
10-20
在示例中，一个包含ID "mainBox" 的`<div>`元素被用作主容器，它有一个固定的高度和宽度，设置为overflow:hidden以隐藏默认的浏览器滚动条。内部的`<div id="content">`元素则包含需要滚动的内容，其高度远超主容器...
原生js仿浏览器滚动条效果
10-20
- 如果内容的高度小于容器的高度，隐藏滚动条。 - 定义了一个比例`bilu`，用于计算鼠标移动时内容的实际滚动距离。 - 添加了`scrll`的鼠标按下事件监听器，当鼠标按下滚动条时，记录鼠标位置并为文档添加鼠标移动...
可滚动容器
05-15
利用form制作的滚动条可滚动容器，适用vfp9
隐藏滚动条但可以滚动
weixin_43240886的博客
06-28 901
1.css样式 .element::-webkit-scrollbar {display:none} 2.如果想兼容浏览器，可以嵌套标签变相隐藏 <div class="outer-container"> <div class="inner-container"> <div class="content"> ....
实现CSS隐藏滚动条并可以滚动内容
dengla6847的博客
09-18 2963
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。· 下面给一...
关于滚动条的设置
AmberWu
06-02 4922
滚动条
关于可滚动容器
都市夜猫的专栏
03-17 4265
今天看到一篇文章，其思路让我突然想起以前没有很好实现的可滚动容器问题。众所周知，vfp 提供了容器控件，但没有提供滚动条；此外，vfp 也没有单独提供滚动条控件，如果用 Microsoft Flat Scrollbar 控件的话，又不支持主题，而且还必须自己写代码来处理滚动事件。现在看来，其实并没有这么复杂，vfp9 已经为你创建一个可滚动的容器控件做好了所有的准备，只看你会不会灵活运用而已。
隐藏滚动条
weixin_33725239的博客
11-05 66
2019独角兽企业重金招聘Python工程师标准>>> ...
怎么去掉滚动条
weixin_44003632的博客
07-19 6108
当我们使用banner图过大的时候会出现关于x轴的滚动条，于是我们可以使用以下的方法去去掉这个滚动条，方法很简单： overflow-x: hidden; overflow-y: overlay; 将这个css样式加入到你的body里面，如果你发现缩小的时候y轴的滚动条多出来了，就将它换个地方，加到关于你banner图的那个div里面。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值