开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

溢出滚动框左右移动div

是一种常见的前端开发技术，用于在一个固定宽度的容器中显示超出容器宽度的内容，并通过滚动条实现左右移动的效果。以下是完善且全面的答案：

概念：溢出滚动框左右移动div是指在一个固定宽度的容器中，当容器内的内容超出容器宽度时，通过添加水平滚动条来实现内容的左右移动。

分类：溢出滚动框左右移动div属于前端开发中的布局技术，常用于展示横向排列的内容，如图片、文字等。

优势：

提供了一种简洁有效的方式来展示超出容器宽度的内容，避免内容被截断或隐藏。
可以在有限的空间内展示更多的内容，提升用户体验。
适用于响应式设计，可以在不同设备上自动适应并展示内容。

应用场景：溢出滚动框左右移动div适用于以下场景：

图片展示：当需要展示多张图片时，可以使用溢出滚动框左右移动div来实现横向滚动浏览。
新闻列表：当新闻标题过长时，可以使用溢出滚动框左右移动div来展示完整的标题，并通过滚动条进行左右移动。
横向导航菜单：当导航菜单项较多时，可以使用溢出滚动框左右移动div来展示所有菜单项，并通过滚动条进行左右移动。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了丰富的前端开发工具和云服务，以下是一些相关产品和介绍链接地址：

腾讯云云开发（https://cloud.tencent.com/product/tcb）：提供全托管的云端开发平台，可用于快速构建前后端分离的应用。
腾讯云对象存储（https://cloud.tencent.com/product/cos）：提供安全可靠的对象存储服务，可用于存储和管理前端开发中的静态资源。
腾讯云CDN（https://cloud.tencent.com/product/cdn）：提供全球加速的内容分发网络，可用于加速前端开发中的静态资源加载。
腾讯云云函数（https://cloud.tencent.com/product/scf）：提供无服务器的函数计算服务，可用于处理前端开发中的业务逻辑。

以上是关于溢出滚动框左右移动div的完善且全面的答案，希望能对您有所帮助。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的...() }) scrollBox.addEventListener('touchmove', (e) => { // Step 2: 阻止冒泡 e.stopPropagation() }) 滚动溢出...问题描述如上录屏所示，弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll...scrollBox.addEventListener('touchmove', (e) => { const deltaY = e.changedTouches[0].pageY - initialPageY // 禁止向上滚动溢出...e.cancelable && deltaY > 0 && scrollBox.scrollTop <= 0) { e.preventDefault() } // 禁止向下滚动溢出

5371 1

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

2.2 实例在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth...2.2.1 未溢出 <!...我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息，微信消息也是这样的呀！...当我们拉动水平滚动条时，元素与视图就不再是左上角顶点重合了，水平之间是存在距离的（按左上角顶点重合计算),可以看到现在的scrollLef有了数值，因为没有移动垂直滚动条，因此垂直方向仍然是没有距离的。...，如果正常计算的话最大距离应该为： 300-200= 100 以及 320-180 = 140，但结果都增加了16左右，那么因为浏览器计算了滚动条的宽高，具体的代码我会在下面贴出，实际的代码会让你更加清楚的理解这一过程

2.7K4 0

CSS样式更改——框模型、定位、浮动、溢出

前言上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓，这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。 1.框模型Border Model ?...相对于浏览器窗口进行定位 div{ position:fixed } 3.浮动Float 元素内的内容向某个方向移动 div{ float:left } left 左浮动 right...右浮动 none 不浮动 4.溢出Overflow 元素内容超过了框架的大小 div{ overflow:scroll } visible 内容不会被修剪，会呈现在元素框之外 hidden...内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容参考文档：W3C官方文档（CSS...篇）总结这篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识，希望让大家对CSS样式更改有个简单的认识和了解。

1.2K1 0

05移动端事件

//注意：在移动开发时，浏览器模拟器时好时坏，一般不用onX的方式绑定事件函数，要用事件绑定的方式（即第二种） div.ontouchstart = function(){}; div.addEventListener...('touchstart', function(){}); 二、PC端事件在移动端（出现的问题） 1、PC端事件在移动端略慢，大概300ms左右 2、阻止PC事件 document.addEventListener...touchstart alert(111); }); 2、解决IOS10下meta中禁止用户缩放功能 3、解决IOS10下溢出隐藏问题... 4、禁止系统默认的滚动条 5、禁止长按选中文字、图片，系统默认菜单 6、问题：阻止了元素的焦点行为 //解决方法...（解决因为document的阻止事件导致的 input 框不能触焦问题） txt.addEventListenr('touchstart', function(ev){ ev.stopPropagation

1.3K5 0

前端基础之CSS_2

摘要盒子模型浮动清除溢出定位模态框 rgba 与 opacity透明区别 ---- 一、CCS盒子模型 margin：标签与标签之间的距离，主要用于控制标签周围间的间隔...是相对的，它的上下左右有时候只能有2处可以确定，另外2边由于没有参照不会有间隔，所以使用时候一般不会全部上下左右都写上。...浮动规律：浮动框可以向左向右移动，知道它的外边缘碰到包含框或另一个浮动的边框为止。浮动框不在文档流中，所以它已经脱离文档流，也就是说，浮动下面的文档流式无视浮动框的位置的。...--相对移动，不脱离文档流，也就是标签移动后，原来的位置还保留着，-->

4141 0

css面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用

浮动的定义使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。...浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。为什么要清除浮动？...clear：both：在左右两侧均不允许浮动元素。...定义overflow:hidden 通过触发BFC方式，实现清除浮动内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素原理：必须定义width或zoom:1，同时不能定义height...建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

9512 0

CSS overflow 内容溢出时的显示方式

自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值描述 visible 默认值。...内容不会被修剪，溢出部分会呈现在元素框之外 hidden 内容被修剪，溢出部分不可见 scroll 内容被修剪，无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条...class="container"> 1 2 3 4 5 macOS 中滚动条的默认样式: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式

2.2K2 0

浮动清楚浮动及position的用法

浮动元素会生成一个块级框，而不论它本身是何种元素。关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...overflow:hidden 伪元素清除法（使用较多）： .clearfix:after { content: ""; display: block; clear: both; } overflow溢出属性...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

2.1K4 0

CSS

，比如在一个div1里并排放了两个div浮动框，由于浮动框脱离了文本，导致原先的大div1没有了内容，若此时在div1下面加一个div2，给div2加内容，由于div没有内容相当于不存在，所以div2...，right 在右侧不允许浮动元素，both 左右两侧都不允许，none 允许，inherit 从父元素继承clear属性的值解决副作用，我们可以在div2标签中加上clear属性，是可以解决问题的，...class="t4 clearfix"> 　　十四、overflow溢出属性...overflow：值值可选：visible 内容不会被修剪，会呈现在元素框之外，hidden 内容会被修剪，并且溢出的内容是不可见的，scroll 内容会被修剪，但是浏览器会显示滚动条以便查看溢出的内容...，auto 如果内容被修剪，则浏览器会显示滚动条以便查看溢出的内容， inherit 从父元素继承overflow的值 overflow还可以写成overflow-x（设置水平方向，只出现x轴的滚动条

1.5K1 1

控制页面的滚动:自定义下拉到刷新和溢出效果

前言通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini...使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动背景滚动边界和滚动链接滚动是与页面交互的最基本的方式之一，但是由于浏览器的诡异默认行为...作为一个例子，带一个应用程序抽屉带有大量用户可能需要滚动的项目。当它们到达底部时，溢出容器将停止滚动，因为没有更多内容可供使用。换句话说，用户到达“滚动边界”。...当用户点击滚动边界时，某些应用可能希望提供不同的用户体验 ? （在Chrome Android上滚动链接）拉到刷新效果拉到刷新是一种直观的手势，通过Facebook和Twitter等移动应用推广。...在聊天框中开始的滚动不会传播出去 ? (聊天窗口下的内容也会滚动) 页面重叠场景下面”方案的另一个变动就是是当你看到内容在固定位置叠加后滚动时。一个死的样品overscroll行为是为了！

3.4K2 0

CSS

浮动元素会生成一个块级框，而不论它本身是何种元素。　　　　关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...按照我们上面那个例子的意思就是说，我们可以给粉色的那个c3属性的div标签设置一个clear：both，意思是说，这个标签的左右都不能有浮动的标签，那么它只能跑到两个浮动的c2div标签的下面，但是一般我们都会再...来吧，大家试试把，然后我们再继续学习~~ overflow溢出属性（先看下面的例子）值描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。...，然后把标签的高度和宽度设置的比较小的时候，文字就溢出了：　　　　然后我们就可以设置一下，如果文字溢出了，溢出的部分怎么办，设置一个overflow为hidden：　　　　再看效果，溢出的文字就不显示了

1.8K1 0

CSS笔记(15)

如果隐藏元素不想要原来的位置,就用display : none 原图隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么....属性值描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局....class="tudou"> 关于鼠标经过时的效果,使用伪类hover时一定要注意,是将鼠标移动到大盒子时才出现遮罩层,

1.1K1 0

一篇文章带你了解CSS基础知识和基本用法

出现滚动条 no 没有滚动条 6)).背景大小 7)).背景图片的定位区域 <div style...none 不浮动 11).溢出Overflow 元素内容超过了框架的大小 div{ overflow:scroll } visible 内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪...e-resize 指示矩形框的边缘可被向右（东）移动 ne-resize 指示矩形框的边缘可被向上及向右移动（北/东） nw-resize...指示矩形框的边缘可被向上及向左移动（北/西） n-resize 指示矩形框的边缘可被向上（北）移动 se-resize 指示矩形框的边缘可被向下及向右移动（南/...东） sw-resize 指示矩形框的边缘可被向下及向左移动（南/西） s-resize 指示矩形框的边缘可被向下移动（南） w-resize

11.1K2 0

CSS魔法堂：不得不说的Containing Block

block的左右content edge相接触。...，拖动滚动条后，Viewport所产生的containing block也会跟随移动，从而保持与Viewport重合。...如果 'direction' 是 'ltr'，包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding...如果 'direction' 是 'rtl'，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding...正常情况：若子box尺寸>containing block尺寸，则子box溢出CB(溢出后的显示效果由overflow属性值决定)。

8909 0

html和css进阶

3：上左右下 4：上右下左代码：六、overflow属性 ---- 解决内容查出父级如何显示的问题 hidden 溢出隐藏 auto 溢出滚动，超出了才滚动 scroll...溢出滚动，无论是否超出都滚动代码： ---- <!...*/ /* overflow: hidden; */ /****** 溢出滚动：如果内容超出则加滚动条 */ overflow: auto;.../* 溢出滚动：无论内容是否超出都显示滚动条的位置 */ /* overflow: scroll; */ } <div

3.5K5 0

Day7:html和css

清除浮动的方法额外标签法,在最后一个浮动元素后面添加一个空的标签代码: 使用after伪元素进行清除浮动. .clearfix:after...style="cursor: default"> 我是达叔小手移动...效果选择器{clear:属性值;} clear 清除属性值描述 left 清除左侧浮动的影响 right 清除右侧浮动的影响 both 同时清除左右两侧浮动的影响额外标签法 clear:...visible : 不剪切内容也不添加滚动条。...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条鼠标样式cursor cursor

1.9K3 0

css应知应会第二集

1、什么是框模型框：页面元素皆为框框模型：Box Model 定义了元素处理(计算)尺寸，边框，内边距和外边距的一种方式有框模型的属性介入到元素中的时候...，元素向下移动 margin-left 设置数据为正数时，元素向右移动 margin-top 设置数据为负数时，元素向上移动...+左右内边距+width div{ width:400px; border:2px solid red;...背景图片固定属性： background-attachment 取值： 1、scroll 默认值，背景图会随着滚动条而滚动...2、fixed 固定,背景图不会随着滚动条的滚动而改变位置 6、背景图片定位/位置作用：改变背景图像在元素中的默认位置

1.2K2 0

css(2)

1.8float（浮动）在css中任何元素都可以浮动，浮动的特点：浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。...（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）...溢出属性溢出发生的原因是标签的文本内容太多，标签的尺寸放不下这么多内容，导致标签文本内容的溢出。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。

1.5K2 0

CSS 技巧一则 -- 不定宽溢出文本适配滚动

hover 时弹出框提示一种可行的方案是在 hover 的时候，弹出一个文本框展示全文，最简单的就是在文本标签下添加 title 属性，填充我们需要的内容： <li title="<em>溢出</em>文本...像是这样：我的宽度是正常宽度我的宽度是<em>溢出</em>了一小部分我的宽度是<em>溢出</em>了<em>溢出</em>了很大一部分 .wrap {...transform: translate() 进行位移的时候，如果使用百分比表示，那么百分比的基准元素是元素本身，也就是如果我们 transform: translate(100%, 0)，其实表示的就是向右<em>移动</em>一个元素本身宽度的距离...这样，不论父容器宽度如何，文本元素宽度如何，都可以实现对<em>溢出</em>文本适配<em>滚动</em>展示。

1.8K2 0

CSS第五天-定位

非静态)的祖先元素来定位子绝父相脱离标准流，在页面不占有位置绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度 ---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动...：overflow 默认值 overflow: visible 溢出部分溢出 overflow: hidden 无论是否溢出，都显示滚动条overflow: scroll 根据是否溢出，自动显示或隐藏滚动条...定位元素 === top：50% 50% translateY(-50%) 行内元素、行内块元素、并列关系的垂直居中对齐设置vertical-align: middle ---- 垂直的用法：文本框和表单按钮无法对齐...input和img无法对齐 div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题使用line-height和vertical-align: middle...让img标签垂直居中问题 ---- 鼠标样式：cursor cursor: default; 小箭头 cursor: pointer; 小手 (较常用) cursor: move; 移动 cursor

2.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭