首页
学习
活动
专区
圈层
工具
发布

浅议内滚动布局

有此可见,一旦强交互的传统web页面桌面软件化,内滚动布局是绕不开的一堵墙,了解之还是很有必要的。 三、如何实现内滚动布局?...新版企业账户中心全站,顶部以及左侧固定,不跟随滚动,右侧主体内滚动,如何实现呢? 由于企业产品不用管0.4%的IE6用户,因此,事件就变得简单地多了。...这是一个预留设计,防止为了满足某些功能或交互体验需要,一个页面同时出现多个类似结构页面的情况。...传统布局下的弹框,如果高度很高,直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是,在内滚动布局下,弹框根本就不在滚动容器里面,翻滚一说从何谈起? 大危机!怎么办!? ?...五、结束语 由于传统窗体滚动已经深入人心,所以我们可能会觉得内滚动布局似乎有些坑;但是,如果当年是内滚动布局天下,我们又该如何看待新兴的窗体滚动布局呢?

2.8K50

浅议内滚动布局 - 腾讯ISUX

有此可见,一旦强交互的传统web页面桌面软件化,内滚动布局是绕不开的一堵墙,了解之还是很有必要的。 三、如何实现内滚动布局?...新版企业账户中心全站,顶部以及左侧固定,不跟随滚动,右侧主体内滚动,如何实现呢? 由于企业产品不用管0.4%的IE6用户,因此,事件就变得简单地多了。...这是一个预留设计,防止为了满足某些功能或交互体验需要,一个页面同时出现多个类似结构页面的情况。...传统布局下的弹框,如果高度很高,直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是,在内滚动布局下,弹框根本就不在滚动容器里面,翻滚一说从何谈起? 大危机!怎么办!?...五、结束语 由于传统窗体滚动已经深入人心,所以我们可能会觉得内滚动布局似乎有些坑;但是,如果当年是内滚动布局天下,我们又该如何看待新兴的窗体滚动布局呢?

1.7K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Material Design —卡片(Cards)

    它们也非常适合展示尺寸或支持操作变化的元素,例如带有可变长度标题的照片。 ? 卡片集合是共面的,或同一平面上的卡片布局。 ?...但要考虑筛选或排序是否会更好地组织内容。 卡片集合的筛选和分类 卡片收藏可按照日期,文件大小,字母顺序或其他参数进行排序或筛选。 集合中的第一个项目位于左上角 顺序从左到右,从上到下进行 ?...从左到右,从上到下 滚动 卡片集合只能垂直滚动。 超过最大卡片高度的卡片内容会被省略,内部不会滚动,但可以扩展卡片。 一旦展开,卡片可能会超过视图的最大高度。...在这种情况下,卡片将随卡片集合一起滚动。 ? ? 左:卡片可留有展开入口    右:手机端不要在卡片内放置可滚动区域,会存在两条很难分开的滚动条 ?...pc端卡片可展开和内部滚动 卡片聚焦 当遍历卡片上的焦点时,在移动到下一张卡片之前访问所有可聚焦元素。

    5.9K100

    超级实用!,掌握这9个鲜为人知的CSS属性

    它提供了一种创建平滑且精确的滚动行为的方式,特别适用于需要滚动浏览一系列项目或部分的情况。 scroll-snap 属性有多个子属性,用于控制滚动行为的不同方面。...它值得探索,因为它在文本布局方面提供了灵活性,特别是在处理需要垂直或侧向书写的语言时。 writing-mode 属性支持以下值: horizontal-tb:内容从左到右水平流动,从上到下垂直流动。...vertical-rl:内容从上到下垂直流动,从右到左水平流动。下一条垂直线位于上一条线的左侧。 vertical-lr:内容从上到下垂直流动,从左到右水平流动。下一条垂直线位于前一条线的右侧。...它提供了一种简单的方法,确保元素保持特定的宽高比,无论其内容或视口的大小如何。 设置元素的宽高比在处理响应式设计或保持特定视觉比例时非常有用。...例如,可能希望创建一个容器,始终保持16:9的宽高比,确保图像无论其原始尺寸如何都能正确显示。

    1.5K30

    浅议内滚动布局

    有此可见,一旦强交互的传统web页面桌面软件化,内滚动布局是绕不开的一堵墙,了解之还是很有必要的。 三、如何实现内滚动布局?...新版企业账户中心全站,顶部以及左侧固定,不跟随滚动,右侧主体内滚动,如何实现呢? 由于企业产品不用管0.4%的IE6用户,因此,事件就变得简单地多了。...这是一个预留设计,防止为了满足某些功能或交互体验需要,一个页面同时出现多个类似结构页面的情况。...传统布局下的弹框,如果高度很高,直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是,在内滚动布局下,弹框根本就不在滚动容器里面,翻滚一说从何谈起? 大危机!怎么办!? ?...五、结束语 由于传统窗体滚动已经深入人心,所以我们可能会觉得内滚动布局似乎有些坑;但是,如果当年是内滚动布局天下,我们又该如何看待新兴的窗体滚动布局呢?

    1.4K20

    WebKit网页布局实现(0):基本概念及标准篇

    作为一个广受好评的浏览器引擎,其网页布局的质量(包括速度、效率、符合标准度等)往往是其关键,那么WebKit究竟是如何布局网页上的所有元素(包括滚动条、文字、图片、按钮、下拉框等)呢?...要在一块指定的画布(或窗口)上布局一些要素,往往需要按从上到下或从左到右(或从右到左)的规则来布局这些元素,而有些元素则可以包含其他元素,当作布局容器来使用。...html中的一些标签所对应的元素可当成容器使用的,以建立坐标定位所包含的元素,如:p、div 等,CSS中称这样的元素为block-level元素,相邻的block-level元素往往从上到下垂直排列;...node对应的元素则缺省为inline-level元素,inline-level元素不能用来定位其他元素,但可以包含其他同为inline-level元素,相邻的inline-level元素,往往按照从左到右或从右到左的水平方向排列...Containing Block所能提供的宽高,同时其overflow属性为visible或auto,则会提供滚动条来保证可以显示其所有内容。

    62010

    【前端攻略--HTMLCSS】html 文档流的理解

    当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。 relative:相对定位。...当对象定位在浏览器窗口以外,浏览器因此显示滚动条。 static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。...普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。...例: 很显然这是最普通的文档流,从左到右,一个挨一个按照顺序01先,02其次,03最后排列。...2、 文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局。 3、 定位:(position)   Static:保持文档流。

    2.8K20

    5个你可能不知道的CSS属性

    例如,如果一个元素是屏幕外(或不可见的),它的所有元素都是屏幕外(或不可见的)。典型的用例是移动设备上的屏幕菜单。...支持下列的值: :内容为我们常规的水平排列,从左到右阅读,第二行在第一行的下方。 :内容垂直排列,从上到下,从右到左阅读,第二行在第一行的左侧。...:内容垂直排列,从上到下,从左到右阅读,第二行在第一行的右侧。 :内容垂直排列,从上到下,从左到右阅读,在所有的排版方式中,即使是垂直版式, 字的顶部都是向左的。...:内容垂直排列,从上到下,从右到左阅读,在所有的排版方式中,即使是垂直版式,字的顶部都是向右。 最后两个值目前仅有Firefox支持。 想了解这个属性如何工作, 请看 a JSFiddle....表示,顾名思义,您希望在不久的将来随时更改元素的滚动位置。 一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候,该值可用于提示浏览器准备渲染内容。 :指定要更改元素的内容。

    1.6K80

    Unity2D开发入门-UI 菜单页面

    当你需要在不同的场景或屏幕之间切换时,Canvas可以帮助你保持UI的一致性。你可以将Canvas放置在每个场景中,并在切换场景时保持它的状态。...子对象将按照水平顺序从左到右排列。 Vertical Layout Group(垂直布局组):该组件用于在垂直方向上排列子对象。你可以设置子对象之间的间距、对齐方式和布局控制选项。...子对象将按照垂直顺序从上到下排列。 Grid Layout Group(网格布局组):该组件将子对象排列成网格形式。你可以设置行数、列数、单元格大小、间距和对齐方式。...子对象将按照从左到右、从上到下的顺序填充网格。 Content Size Fitter(内容尺寸适配器):该组件可根据子对象的大小调整容器的大小。...你可以设置调整方式,如根据内容的最小或最大大小进行调整。这在需要根据内容自动调整大小的滚动视图和弹出窗口中非常有用。

    1.1K40

    5个你可能不知道的CSS属性

    vertical-rl:内容垂直排列,从上到下,从右到左阅读,第二行在第一行的左侧。 vertical-lr:内容垂直排列,从上到下,从左到右阅读,第二行在第一行的右侧。...sideways-lr:内容垂直排列,从上到下,从左到右阅读,在所有的排版方式中,即使是垂直版式, 字的顶部都是向左的。...想了解这个属性如何工作, 请看 a JSFiddle. 结果就在下面: 请记住,只有使用日语或中文等语言时,一些值的效果才会展现。...要了解有关clip-path的使用以及如何为此属性添加动画的更多信息,可以查看下列文章: Introducing the CSS clip-path Property clip-path 另外,如果你想用一个工具在线查看这些属性如何起作用...scroll-position表示,顾名思义,您希望在不久的将来随时更改元素的滚动位置。 一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候,该值可用于提示浏览器准备渲染内容。

    1.3K20

    5个你可能不知道的CSS属性

    writing-mode 支持下列的值: horizontal-tb:内容水平方向从左到右,垂直方向从上到下。 下一条水平线位于上一行之下。...vertical-rl:内容水平方向从右到左,垂直方向从上到下。 下一条垂直线位于上一行的左侧。 vertical-lr:内容水平方向从左到右,垂直方向从上到下。。 下一条垂直线位于上一行的右侧。...想看一下这个属性如何工作, 请看 a JSFiddle. 结果就在下面: ? 请记住,只有使用日语或中文等语言时,一些值的效果才会展现。...要了解有关clip-path的使用以及如何为此属性添加动画的更多信息,可以查看下列文章: Introducing the CSS clip-path Property clip-path 另外,如果你想用一个工具在线查看这些属性如何起作用...scroll-position表示,顾名思义,您希望在不久的将来随时更改元素的滚动位置。 该值可用于提示浏览器准备渲染内容,而不是可滚动元素上的滚动窗口中可见的内容。

    1.2K20

    【愚公系列】2023年11月 Winform控件专题 FlowLayoutPanel控件详解

    一、FlowLayoutPanel控件详解FlowLayoutPanel控件是Winform中的一个容器控件,用于在一个可滚动的面板中自动排列其子控件。...FlowLayoutPanel控件的特点如下:与其他容器控件相比,FlowLayoutPanel更适合承载具有动态性质的控件;可以通过设置流动方向为“从左到右”、“从上到下”、“从右到左”、“从下到上”...等方式来控制控件的排列方向;可以通过设置FlowLayoutPanel控件的AutoScroll属性来使其具有自动滚动条功能。...FlowDirection属性有四个枚举值:LeftToRight:从左到右排列子控件。TopDown:从上到下排列子控件。RightToLeft:从右到左排列子控件。...count--; break; } }}步骤5:排序和倒序排序和倒序按钮的方法中,首先将 FlowLayoutPanel 控件中的按钮名称按字母顺序排序或倒序排列

    1.8K11

    在Python中如何使用GUI自动化控制键盘和鼠标来实现高效的办公

    你可以对机械臂编程,让它敲键盘或移动鼠标。对于涉及许多无脑点击或填表的任务,这种技术特别有用。 pyautogui 模块包含了一些函数,可以模拟鼠标移动、按键和滚动鼠标滚轮。   ...而且, 如果出了问题,但你的程序继续到处移动鼠标,可能很难搞清楚程序到底在做什么,或者如何从问题中恢复。...1.4.3 滚动鼠标  最后一个 pyautogui 鼠标函数是 scroll()。你可以向它提供一个整型参数,说明向上或向下滚动多少单位。...单位的意义在每个操作系统和应用上不一样,所以你必须试验,看看在你的情况下滚动多远。滚动发生在鼠标的当前位置。传递正整数表示向 上滚动,传递负整数表示向下滚动。  ...可以将上图的结果粘到粘贴板,然后利用休眠函数,定位到粘贴板,然后向上翻滚100个单位,我的计算机翻滚10000个单位,看到的效果比较明显   1.5 处理屏幕  你的 GUI 自动化程序没有必要盲目地点击和输入

    5.4K31

    射影几何变换的基本原理

    旋转:法线贴花、暴露翻滚角 缩放:线性增长的相对速率 蓝图入口 细节优化 演示 前情提要 ?...本文讨论如何在非地面的平面/曲面上动态贴贴花。...但是贴花actor的旋转是三维的,而法线只暴露了其中2个维度,即俯仰角和偏航角,剩下的翻滚角(roll)只能让用户来决定。...飞行游戏中(直升机除外),键盘控制规则一般会遵守这个默认习惯:W/S键控制飞机俯仰,Z/C键控制飞机偏航,A/D键控制飞机翻滚。我们也可以采用这种模式来操作贴花围绕法线的翻滚角。...因为这种设计模式符合用户习惯:我们在手机端翻滚很长的网页时,手指滑动速度并不和页面滚动速度并一致,而是后者的加速度。同理,每次缩放的增量不是一个固定值而是原来尺寸的固定倍数(比如1.1)。

    2.4K40

    初学者练手项目

    原创声明:禁止抄袭,转载需要注明来处 内容概要:Python闹钟、电子邮件切片器、故事生成器、密码生成器、骰子翻滚模拟器、QR码生成器、动物问答游戏、打印彩色文本、BMI计算器、华氏转摄氏转换器、接收多个用户输入...作为Python或任何其他语言的新手,您应该继续尝试这些类型的程序,因为它们可以帮助您探索更多的功能 密码生成器 要编写Python程序来创建密码,请声明数字字符串+大写字母+小写字母+特殊字符。...koE 石头剪刀布的游戏 使用Python创建石头、剪刀、布的游戏,我们需要接受用户的选择,然后将其与使用Python随机模块从选择列表中获得的计算机选择进行比较,如果用户获胜,那么分数将增加1: 骰子滚动模拟器...无论目的是什么,您都应该编写一个循环,以从键盘上键入的用户读取一个或多个用户输入,并为每个输出打印结果。换句话说,您必须编写一个经典的打印循环程序。...因此,让我们看一下将罗马数字转换为小数的过程: 从左到右浏览罗马数字字符串,一次检查两个相邻的字符。如果需要的话,还可以指定循环的方向,但是没有关系,只要相应地实现了比较即可。

    3.5K40
    领券