如何在DIV内只要垂直滚动条，不要水平滚动条

最新推荐文章于 2024-04-10 23:48:49 发布
最新推荐文章于 2024-04-10 23:48:49 发布
阅读量1w 收藏 1
点赞数 2
分类专栏： html+css

<DIV style="OVERFLOW-Y: scroll; OVERFLOW-X:hidden; width: 685px; height: 180px"><DIV>

说明: 

overflow-y: scroll   - 有垂直滚动条

overflow-y: auto   - 自动

overflow-y: hidden - 无垂直滚动条

宽度width一定不能省略，否则水平方向可以滚动

如果要数字或一个长单词强制换行，可以在style中添加word-break: break-all;属性。


moqiang02
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue滚动条设置及美化
weixin_43937851的博客
06-15 7938
滚动条设置、美化
css-自定义横竖滚动条样式
最新发布
2301_76671906的博客
05-24 763
CSS的::-webkit-scrollbar伪元素来修改滚动条的外观，包括宽度、颜色、滑块的形状等。
div纵向、横向滚动条
meteor_730的专栏
09-29 4334
div style="overflow-x:auto;width:200px;overflow-y:hidden"只显示横向滚动条在大于200px后div style="overflow-x:hidden;width:540px;overflow-y:auto;height=300px"只显示纵向滚动条在大于300px后
css 常用滚动条
qq_34114535的博客
04-21 527
*滚动条的背景区域的圆角*//*滚动条的背景颜色*//*滚动条的背景区域的内阴影*//*滑块 滚动条的内阴影*/
css：设置滚动条样式&高度自适应
好幸运
05-17 9342
一、如何出现滚动条 在样式中添加 overflow-y: scroll; 二、修改滚动条样式 2.1、首先在标签中定义一个class名 <div class="scroll"> 2.2、设置样式 /*滚动条大小*/ .scroll::-webkit-scrollbar{ width:5px; height:10px; } /*正常情况下滑块的样式*/ .scroll::-webkit-scrollbar-thumb{ backgr.
用div+css解决出现水平滚动条问题
10-30
在 Web 开发中，水平滚动条的出现是一个常见的问题，特别是在使用 div + CSS 布局时。今天，我们将讨论如何使用 div + CSS 解决出现水平滚动条问题。 问题分析 在上面的代码中，我们可以看到，开发者定义了一个...
vue 监听某个div垂直滚动条下拉到底部的方法
12-10
如下所示： this.$nextTick(() => { const el = document.querySelector('.act-not'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el....坑：在做滚动加载分页时候，有时候第三
jQuery实现将div的滚动条滚动到指定位置
10-27
如果div的`overflow`属性同时设置为`auto`，那么水平和垂直滚动条都会出现。 总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长...
div的滚动条如何实现
12-13
3. `scroll`：无论是否需要，都会显示水平或垂直滚动条。 4. `auto`：仅在需要时显示滚动条，即内容溢出容器时。 具体到 `div` 的滚动条实现，以下是一些常见用法： - **显示滚动条**： ```css <div style=...
设置简单的垂直滑动滚动条
lxl2092828212的博客
03-28 854
只要保证内容足够多，就行了，利用overflow-y:scroll;就可以实现简单的滚动条效果。若出现横向滚动条，便是宽度设置太小，可以适当加长宽度。
CSS 滚动条
weichenyang的博客
08-03 1165
【代码】CSS 滚动条。
使用css优化页面横向/纵向滚动条样式
w13966597931的博客
04-14 2113
第一段是纵向的、第二段是横向的。如果横向纵向都要添加，那么，两个都复制即可。less要不要无所谓，要了就是仅在当前页面生效。
学会使用 CSS 自定义滚动条，能让你做的产品更有用户体验！
2401_83739632的博客
04-10 1056
首先需要介绍一下滚动条的组成部分。滚动条包含track和thumbtrack是滚动条的基础，其中的thumb是用户拖动支页面或章节内的滚动。还有一件重要的事情要记住，滚动条可以水平或垂直地工作，这取决于设计。另外，在一个多语言网站上工作时，这一点也会发生变化，该网站在从左到右（LTR）和从右到左（RTL）两个方向上工作。拥有一个自定义的滚动条曾经是webkit的专利，所以Firefox和IE被排除在游戏之外。我们有一种新的语法，只在Firefox中使用，当它被完全支持时，将使我们的工作更容易。
【CSS】固定区域竖向滚动
Bug笔记
11-27 735
CSS固定区域竖向滚动
DIV实现纵向滚动条
知其所以然
12-05 9809
DIV实现纵向滚动条overflow-y:scroll的使用， 1.首先设置固定div的宽高 2.overflow-y:scroll 如果设置overflow:auto;表示当你内容超过div高度出现滚动条 overflow语法如下： overflow : visible | auto | hidden | scroll  参数：  visible :不剪切内容也不添加滚动条。假
CSS重置浏览器所有默认的样式
weixin_30564785的博客
08-31 560
::-webkit-scrollbar-track-piece { width: 8px; height:8px; background-color: #f0f0f0; /* 背景色 */ } ::-webkit-scrollbar { width: 8px; height:8px; background-color: #00C0FF } ...
css 设置滚动条样式、滑块高度及样式等
DarlingYL的博客
05-29 6353
css 设置滚动条样式、滑块高度及样式等。
div 显示垂直滚动条
HJ850126的专栏
05-31 9672
使用div显示水平和垂直滚动条的css代码
03-26
以下是使用div显示水平和垂直滚动条的CSS代码示例： ``` .scroll-container { width: 300px; height: 200px; overflow: auto; scrollbar-width: thin; scrollbar-color: #555 #ddd; } .scroll-container::-webkit-scrollbar { width: 8px; } .scroll-container::-webkit-scrollbar-track { background-color: #ddd; } .scroll-container::-webkit-scrollbar-thumb { background-color: #555; border-radius: 10px; border: 2px solid #ddd; } ``` 在上面的示例中，我们使用类名为".scroll-container"的div元素来包装我们的内容。此外，我们设置了div元素的宽度和高度，然后使用"overflow: auto"来允许内容超出div元素的边框，从而显示滚动条。 我们还指定了滚动条的样式。我们使用"scrollbar-width"属性设置了滚动条的厚度，并使用"scrollbar-color"属性设置了滚动条的颜色。 最后，我们使用"-webkit-scrollbar"伪元素以及相关的子元素来定义滚动条的样式。我们设置了滚动条的宽度、背景色和滑块的样式。 请注意，这些示例可能不适用于所有浏览器，因此您可能需要针对特定浏览器调整代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值