使HTML元素沿着特定的滚动条移动，而不是沿着主滚动条移动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS进阶知识

不一定是是是否支持transition 是是否（还会让transition失效）注意: visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性...回流：当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候。...重绘：当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。回流必将引起重绘，而重绘不一定会引起回流。...visible 不显示滚动条，但是超出部分会显示。 hidden 不显示滚动条，超出部分不会显示。 scroll 显示滚动条，就算某个方向没超出也会显示。...强调使用相对单位 (%, rem, em) 流动、弹性的设计 (inline-block, float…) mata-viewport可视区域 user-scalable=no 取消移动装置的缩放功能

2071 0

CSS-基础样式

vertical-align: super; /* 把元素的顶端与行中最高元素的顶端对齐 */ vertical-align: top; /* 把元素的顶端与父元素字体的顶端对齐...*/ vertical-align: text-top; /* 把此元素放置在父元素的中部 */ vertical-align: middle; /* 使元素及其后代元素的底部与整行的底部对齐...*/ vertical-align: bottom; /* 把元素的底端与父元素字体的底端对齐 */ vertical-align: text-bottom; } 动画相关...: translateX(300px); } } .my-content { /* 设置动画：动画名称、动画完成时间（也叫过渡时间 5S）、移动曲线速度（线性）、延迟执行、动画重复次数...*/ overflow: auto; /* 内容溢出，隐藏溢出元素 */ overflow: hidden; /* 内容溢出，出现x轴滚动条 */ overflow-x

6543 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

前言相信做过网页的对Css都不是很陌生，它可以帮助我们重铸网页中很多绚丽的特效，尤其是现在Css已经发展3.0版本，很多功能更是丰富多彩，让我们的开发时间不仅大大缩短，而且还可以轻松做出许多华丽的特效...内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容...测试 rotate3d(x,y,z,angle) 定义 3D 旋转 rotateX(angle) 定义沿着 X 轴的 3D 旋转 rotateY(angle) 定义沿着 Y 轴的 3D 旋转 rotateZ...(angle) 定义沿着 Z 轴的 3D 旋转其它的都是差不多的用法，不过还有一个用法不同的就是： perspective(n) 为3D转换元素定义透视视图。...指示矩形框的边缘可被向上及向左移动（北/西） n-resize 指示矩形框的边缘可被向上（北）移动 se-resize 指示矩形框的边缘可被向下及向右移动（南/

11.1K2 0

从 antDesign 来窥探移动端“滚动穿透”行为

比如上方图片中有两个元素，一个为红色边框存在滚动条的父元素，另一个则为蓝色边框黑色背景不存在滚动条的子元素。当我们拖动不可滚动的子元素时，实际会意外造成父元素会跟随滚动。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...继续沿着相同方向进行拖动，此时浏览器会寻找当前元素最近的可滚动祖先元素从而意外触发祖先元素的滚动。同样，动画中红色边框为拥有滚动区域的父元素，蓝色边框为父元素中同样拥有滚动区域的子元素。...代码同样也并不是特别难理解，在 while 循环中从传入的第一个参数 el 一层一层往上寻找。要么寻找到可滚动的元素，要么一直寻找到 node === root 直接返回 root。...，因为它并不是我们主要想赘述的内容。

4592 0

移动端全兼容的flexbox速成班 - 腾讯ISUX

子元素的宽度不会根据内容的长短而发生改变。如下图所示，前台同学增加或删减tab数量，只需要增减DOM结构即可，无需样式的修改。 ?...但是导航变成单按钮布局的时候，会导致标题栏的位位移，不是特别的推荐。 ?...; 将“沿着主轴对齐方式+沿着侧轴对齐的方式”设置为居中，无论子元素是什么形态，都可以随时随地的“水平垂直居中”了。...【Demo Link】 https://jsfiddle.net/tikizzz/zq8cdkfg/ 7.用flex做垂直弹性布局顶部栏，底部栏fixed，中间的元素支持滚动条，这是移动端常见的页面结构模型.../demo.html Part4 其他希望以上的demo对移动端开发的小伙伴们有用。

1.2K3 0

移动端全兼容的flexbox速成班

子元素的宽度不会根据内容的长短而发生改变。如下图所示，前台同学增加或删减tab数量，只需要增减DOM结构即可，无需样式的修改。...但是导航变成单按钮布局的时候，会导致标题栏的位位移，不是特别的推荐。...; 将“沿着主轴对齐方式+沿着侧轴对齐的方式”设置为居中，无论子元素是什么形态，都可以随时随地的“水平垂直居中”了。...【Demo Link】:https://jsfiddle.net/tikizzz/zq8cdkfg/ 7.用flex做垂直弹性布局顶部栏，底部栏fixed，中间的元素支持滚动条，这是移动端常见的页面结构模型.../demo.html Part4 其他希望以上的demo对移动端开发的小伙伴们有用。

1.7K9 0

移动Web学习笔记

在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式...，则该元素的行高为 16px X 2em = 32px 13. rem 解释：rem是CSS3新引进的一个度量单位，其数值表示根节点(html标签)的字体大小的倍数，在当前的所有主流浏览器中根节点(...html标签)的字体大小都为16px，即 html标签的font-size:16px，1rem = 16px,为了让后面方便计算，通常将1rem的值设为10px，通过将html标签的font-size值设为...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条...两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 15.

1K3 0

网站自适应布局为什么我要抛弃rem，改用vw？

在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。...简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。...百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。...100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。...（移动端滚动条不占位，所以不会有这个问题）不过pc端一般不需要弹性布局，还是尽量使用width:100%更保险。为何rem布局比vw主流？

3.2K1 0

css 总结2 原

，不随滚动条滚动 background-origin是css新增属性，在此基础上可以用background-position进行偏移。...X 和 Y 轴移动元素。...translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。...这个属性允许你改变3D元素是怎样查看透视图定义的perspective属性它是应用在元素的子元素而不是元素本身 perspective-origin 属性观察者的位置，观察者可移动的区域就是被观察的物体未变换前的区域范围...preserve-3d 看起来像穿透一个平面，而不是近大远小的视觉） 7、transtion过渡 div { transition: width 1s linear 2s;

5442 0

浅议内滚动布局 - 腾讯ISUX

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始：传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页...既然是内滚动，就有必要干掉浏览器原生的滚动条，这个很简单： html { overflow: hidden; } “然后呢？”...由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...窗体，不是元素，因此，上面滚动事件八辈子都不会执行。...100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。

1.4K3 0

移动web开发需要注意的二十点

的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码（部分设备可能支持不是很好）； 2、HTML5标签的使用在开始编写webapp...时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉...12、如何关闭iOS中键盘自动大写我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式...19、如何解决android平台中页面无法自适应虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下

1.9K2 0

DOM 和 BOM 中的各种宽高属性

先区分一下 window 对象和 document 对象： window 对象表示浏览器中打开的窗口，而 document 对象表示整个 html 文档，它是 window 对象的一部分。...不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 window.outerHeight/window.outerWidth：返回表示窗口的外部高度/宽度的数字。...包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 image.png 1.2 与屏幕相关 window.screen.width/window.screen.height：返回表示屏幕的宽度...注意：IE 和 Opera 下表示的是窗口文档区到屏幕的距离，这意味着窗口最大化时，screenTop 返回的是窗口顶部栏的高度而不是 0。...如下图： image.png 可以看出，假如元素在页面滚动条的拖动下向上移动，则元素的 top 会是负值。

1.9K1 0

软件测试|超好用超简单的Python GUI库——tkinter（十四）

设置 Canvas 的状态："normal" 或 "disabled"，默认值是 "normal"，注意，该值不会影响画布对象的状态 takefocus 指定使用 Tab 键可以将焦点移动到输入框中，...默认为开启，将该选项设置为 False 避免焦点在此输入框中 width 指定 Canvas 的宽度，单位为像素 xscrollcommand 与 scrollbar（滚动条）控件相关联（沿着 x 轴水平方向...默认为 0，表示可以水平滚动到任意位置 yscrollcommand 与 scrollbar 控件（滚动条）相关联（沿着 y 轴垂直方向） yscrollincrement 该选项指定 Canvas 垂直滚动的...一般情况下，默认主窗口的左上角为坐标原点，这种坐标系被称作为“窗口坐标系”，但也会存在另外一种情况，即画布的大小可能大于主窗口，当发生这种情况的时，可以采用带滚动条的 Canvas 控件，此时会以画布的左上角为坐标原点...('450x350') # 设置画布的背景颜色为白色 cv=Canvas(root,bg="white",width =300, height = 250) # 将控件放置在主窗口中 cv.pack(

8871 0

滚动，你真的懂了吗

让我们来了解下哈只有window窗体滚动即页面只含有浏览器窗体默认的滚动条，窗体滚动条随页面内容而不断增长。如手Q吃喝玩乐的站点首页，在android机上就是使用window滚动 ?...个人认为，内滚动布局就是主滚动条是在页面内部，而不是浏览器窗体上的布局。故内滚动布局是相对传统的window窗体滚动而言的。...滚动计算基础知识由于不同浏览器其窗体滚动条的属性获取方式有所差异，故考虑兼容性，我们假设使用了场景是移动到，并且使用了zepto的库首先，我们想要更好的操作控制条，需了解两个地方 滚动条属性 滚动条调用方法...(Y)； $scrollTarget.scrollLeft(X)；我们可以发现在这里window滚动比较特殊其获取滚动属性是用 document.body这个对象，而调用滚动条滚动方法是用window...为了使目标节点，移动到内滚动区域的中间线我们最终需要知道当前目标节点距离中间线的偏移值，然后加上当前滚动区域的滚动条偏移值，便是我们需要滚动条滚动到的偏移值大小了。

1.1K1 0

浅议内滚动布局

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部下方开始： ?...既然是内滚动，就有必要干掉浏览器原生的滚动条，这个很简单： html { overflow: hidden; } “然后呢？”...由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...窗体，不是元素，因此，上面滚动事件八辈子都不会执行。...100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。

2.5K5 0

如何使用 CSS 设置和自定义水平和垂直滚动条

创建带有导航项目的导航栏为了创建导航栏，我们将使用HTML nav元素。...在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。...样式化水平滚动条（flexbox滚动）样式化水平滚动条与样式化垂直滚动条类似，只是一个属性不同。高度属性用于设置水平滚动条的厚度，而不是宽度属性。...为了实现所有滚动条的统一定制，我们可以按如下方式应用样式：在不选择任何特定元素、标签或类名的情况下应用滚动条样式在网站同时具有水平和垂直滚动条的情况下，为两个属性的height和width同时赋值。...（::-webkit-scrollbar和::-webkit-scrollbar-track）不需要与任何特定的元素相关联。

1.4K0 0

滚动，你真的懂了吗

让我们来了解下哈只有window窗体滚动即页面只含有浏览器窗体默认的滚动条，窗体滚动条随页面内容而不断增长。如手Q吃喝玩乐的站点首页，在android机上就是使用window滚动 ?...个人认为，内滚动布局就是主滚动条是在页面内部，而不是浏览器窗体上的布局。故内滚动布局是相对传统的window窗体滚动而言的。...滚动计算基础知识由于不同浏览器其窗体滚动条的属性获取方式有所差异，故考虑兼容性，我们假设使用了场景是移动到，并且使用了zepto的库首先，我们想要更好的操作控制条，需了解两个地方 滚动条属性 滚动条调用方法...(Y)； $scrollTarget.scrollLeft(X)；我们可以发现在这里window滚动比较特殊其获取滚动属性是用 document.body这个对象，而调用滚动条滚动方法是用window...为了使目标节点，移动到内滚动区域的中间线我们最终需要知道当前目标节点距离中间线的偏移值，然后加上当前滚动区域的滚动条偏移值，便是我们需要滚动条滚动到的偏移值大小了。

1.6K7 0

WPF中的布局方式

它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面 WPF布局规则:wpf窗口只能包含单个元素,为在wpf窗口中放置多个元素,需要添加容器然后向容器中放置元素...;在水平方向上,WarpPanel面板从左向右放置条目,然后在随后的行中放置元素;在垂直方向上,WarpPanel面板在自上而下的列中放置元素,并使用附加的列放置剩余的条目: 我们用button按钮进行演示...,当WrapPanel自身的宽高发生改变时对其中的元素布局也会有影响,如下图:当宽度变窄时其会自动调节其中元素的布局方式 4.DockPanel:沿着一条外边缘来拉伸所包含的控件,也就类似于许多窗口顶部的工具栏...DockPanel类似都有拉伸作用: 默认情况下是水平拉伸,如果我们想垂直拉伸,可以加一下属性 Orientation="Horizontal" 6.ScrollViewer:自定义滚动条样式容器...,自带滚动条: 可以看到在右侧有一个白色的滚动条样式发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159904.html原文链接：https://javaforall.cn

1.7K1 0

WEBAPP开发技巧总结

HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5...orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。...12、如何关闭iOS中键盘自动大写我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊...19、如何解决android平台中页面无法自适应虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下

1.9K2 0

flexbox 布局

flexbox是什么即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。...使用flexbox 要开始使用flexbox，必须先让父元素变成一个flex容器，而此时子元素就变成了flex项目。...可以在父元素中设置display:flex或者display:inline-flex。这样一个flexbox格式上下文就启动了。 html结构 <!...默认是不换行的。当flex项目过多时，也不会换行，所以每个项目会被压缩。而且如果flex项目元素内有类似文字等内容会撑开flex项目，那么浏览器就会出现滚动条。...，而不影响相邻的弹性项目。

8954 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭