移动端盒子超出部分滚动,但没有滚动条

这篇具有很好参考价值的文章主要介绍了移动端盒子超出部分滚动,但没有滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

核心代码:

盒子{
    			overflow-y: scroll;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;
}
盒子::-webkit-scrollbar{
    			overflow-y: scroll;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;
}

完整代码:文章来源地址https://www.toymoban.com/news/detail-575667.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.box {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				width: 200px;
				height: 400px;
				border: 1px solid red;
				overflow-y: scroll;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;
			}

			.box::-webkit-scrollbar {
				width: 0 !important
			}
			p{
			 box-shadow: 0 0 10px #e1dcdc;
			 width: 150px;
			 height: 40px;
			 text-align: center;
			 line-height: 40px;
			}
		</style>
		<div class="box">
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
			<p>hello world</p>
		</div>
	</body>
</html>

到了这里,关于移动端盒子超出部分滚动,但没有滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3盒子模型

    盒子模型分为两种: 第一种是 W3C 标准的盒子模型(标准盒模型) 第二种 IE 标准的盒子模型(怪异盒模型) 标准盒模型与怪异盒模型的表现效果的区别之处: 1、标准盒模型中 width 指的是内容区域 content 的宽度 height 指的是内容区域 content 的高度 标准盒模型下盒子的大小 =

    2024年02月21日
    浏览(41)
  • CSS3中盒子居中

    (1)利用定位(子绝父相)、margin-left、和margin-top实现 (2) 利用定位(子绝父相)、transfrom属性实现 (3) 利用flex布局实现盒子居中

    2024年02月22日
    浏览(31)
  • Element UI Dialog 对话框改成固定高度,超出部分滚动条滚动

    elememt ui 中的el-dialog对话框如果 内容过多高度会被无限拉长 。要将其设置成固定高度,此处我设置的是 页面总高度的70% ,内容过多时在对话框内出现 滚动条 。但是这样设置会造成高度不能根据内容自适应,始终是70%。可以有两种方法实现: 方法二 : 主要是运用element ui 中

    2024年02月12日
    浏览(30)
  • CSS3-盒子模型-边距问题

        1 清除默认内外边距         场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置             比如:body标签默认有margin:8px、p标签默认有上下的margin、ul标签默认由上下的margin和padding-

    2024年02月10日
    浏览(35)
  • css如何给盒子底部加阴影,CSS3 --添加阴影(盒子阴影、文本阴影的使用)

    CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用: 1,盒子阴影 (1)盒子阴影的属性是 box-shadow 1 box-shadow:5px 5px 10px g

    2024年02月10日
    浏览(32)
  • 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

    1.1什么是网页? 1.2什么是HTML? 2.1常用的浏览器 2.2浏览器内核  3.1为啥需要Web标准? 3.2Web标准的构成 : 4.1基本语法概述: 4.2标签关系: 5.1HTML网页:   6.1VSCode常用快捷键: 第二篇:前端VSCode常用插件-快捷键-以及常用技巧-pink老师 - 哔哩哔哩 快速复制一行:shift+alt+下/上箭

    2024年04月08日
    浏览(80)
  • CSS实现超出部分的省略

            在日常开发过程中我们难免会遇到后端返回给我们的的数据太长的情况,此时我们通常采取的是...的省略方式,其中的CSS大致如下,既可以实现对应的省略显示,但有些时候我们有需要用户可以查看具体的完整信息,这里就那vue来距离,我们可以通过element等三方的组

    2024年01月19日
    浏览(30)
  • CSS系列之盒子阴影box-shadow(CSS3)

    用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括 阴影的X轴偏移量 、 Y轴偏移量 、 模糊半径 、 扩散半径 和 颜色 。 当给出两个、三个或四个 length 值时。 如果只给出两个值, 那么这两个值将会被

    2023年04月08日
    浏览(32)
  • day11_2 CSS3弹性盒子flexbox

    弹性盒子由**弹性容器(Flex container)和弹性子元素(Flex item)**组成。 通过设置 display 属性 的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内

    2024年01月17日
    浏览(35)
  • css自适应高度或宽度,超出内容显示滚动条

    有时候项目中使用了flex布局,高度或是宽度是自动填满剩余空间,不是具体的数值的时候,想要设置区域滚动条,可采用以下方法设置:

    2024年02月13日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包