我用堆栈封装的3个容器来得到类似这样的布局，现在我想让页面可以滚动吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

AI编码工具Bolt：是神器还是鸡肋？

因此，很明显，我的体验将完全由 Bolt 调解——即使我位于 Astro 的页面上。为了看看我们现在有什么，我点击了大的部署按钮，这在聊天框中得到了中继。...所以我们需要看看布局。通过左侧窗格浏览文件，我遇到了 src/pages/blog/index.astro 中博客缩略图的描述：当我开始编辑时，页面在我输入时不断向上滚动。...但至少我的页面有一个 URL，所以我可以立即尝试另一个浏览器：Safari。当然，我必须重新登录，让 Safari 向我显示弹出窗口，并重新验证。...现在你可能会说，“当然，这个想法是用聊天来改变一切，而不是自己做”，你说的有道理。首先，我要求 Bolt 更改每个博客的第一个导语，以便它们不都具有相同的 ipso lorem 拉丁文。...但是滚动错误将由（人类）开发者修复。LLM 的态度无法由 Bolt 控制，因为他们不构建模型。好的，我们可以轻松地调整日期位置和行距。我希望它显示在一列中，并最终显示在一个页面上。

1K0 0

Ask Apple 2022 与 SwiftUI 有关的问答（下）

.}// 可以用类似字典的方式对元素进行操作，快速定位，同时在更新 IdentifiedArray 时，也不容易引发 ForEach 的异常todos[id:id] = newTodo自定义布局Q：在实现自定义布局时...开发者即使无法实现这样的布局容器，也应对各种尺寸需求的定义有清晰的理解。在 SwiftUI 布局 —— 尺寸（上）[8] 一文中，对建议尺寸的几种模式都进行了介绍。...然后，您可以使用垂直或水平堆栈布局来组合它，这样您就不需要自己完成所有的实现工作。Jane 的自动根据宽度排版[10] 视频与该问题十分契合。...将背景扩展到安全区域Q：如果我有一个自定义的容器类型，可以接受一个顶部和底部的视图，是否有办法让 API 的调用者将所提供的视图的背景扩展到安全区域内，同时将内容（如文本或按钮）保留在安全区域内？...A：你可以通过创建自定义 ViewModifier 来封装其中的一些代码。

19.8K3 0

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

是的

没有找到

看完了 2021 CSS 年度报告，我学到了啥？

查了下，还挺好用的，之前这样的事我都是用 display:inline-block 去搞，现在一个属性就搞定了。...，效果是一样的：现在我们把容器的排列方式改成：direction: rtl;，我们会发现物理布局出了问题：在这段 CSS 里，margin-inline-start 就是一条逻辑属性，它可以让...但是，@media 针对的是整个页面的显示大小，然而对于一些特定页面结构中的组件（例如在左右分栏的页面结构中的卡片），明明我们只是想根据组件的大小来调整布局，然而却得考虑整个网页的布局，以推测在不同页面大小下这个组件能够拥有的空间...交互 CSS 滚动捕捉 CSS 滚动捕捉可以让用户完成滚动之后将视口锁定到某个元素的位置，这种效果经常出现在某些官网的网站里。...比如我们在网页的右下角放了个机器人聊天窗口，我们在滚动聊天消息的时候，如果滚动到了底部，页面的其他部分也会跟着滚，这时候就可以用 overscroll-behavior-y: contain; 来设置在当前区域已经滚动到底部时

1.1K2 0

浅议内滚动布局 - 腾讯ISUX

比方说，QQ音乐的首页目前是这样子的：以后可能就会变成这样子： “纳尼，这不就是现在的QQ音乐软件界面截图？”“这位同学眼神很犀利，没错，这就是有着全国最大的正版高质量乐库的QQ音乐PC版截图”。...我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。为了更好理解，我们拿实例说话。...下图为以前企业QQ账户中心组织结构页面（测试页面）的真容：看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。...或者这么说吧，把所有页面内容放在一个page中，此时page就好比一个可以移动的房子，回头你跳槽来腾讯了，房子可以一起带过来，原来的位置可以被其他房子代替。...内滚动布局是典型的改变浏览器默认滚动容器的布局，自然覆盖层一出现，就没法滚动。不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。

1.8K3 0

浅议内滚动布局

web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的： ? 以后可能就会变成这样子： ? “纳尼，这不就是现在的QQ音乐软件界面截图？”...我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。为了更好理解，我们拿实例说话。...看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。...或者这么说吧，把所有页面内容放在一个page中，此时page就好比一个可以移动的房子，回头你跳槽来腾讯了，房子可以一起带过来，原来的位置可以被其他房子代替。...内滚动布局是典型的改变浏览器默认滚动容器的布局，自然覆盖层一出现，就没法滚动。不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。

2.9K5 0

浅议内滚动布局

web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的： ? 以后可能就会变成这样子： ? “纳尼，这不就是现在的QQ音乐软件界面截图？”...我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。为了更好理解，我们拿实例说话。...看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。...或者这么说吧，把所有页面内容放在一个page中，此时page就好比一个可以移动的房子，回头你跳槽来腾讯了，房子可以一起带过来，原来的位置可以被其他房子代替。...内滚动布局是典型的改变浏览器默认滚动容器的布局，自然覆盖层一出现，就没法滚动。不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。

1.4K2 0

聊一聊CSS的过去与未来，加深对CSS的理解

很久以前，CSS就像一阵清新的气息，只需简单轻松地为页面添加样式。它涉及设定规则，让浏览器自动处理。你可以改变边距、字体和大小，但这只是浅尝辄止，你懂的吗？...还记得旧的HTML标签，比如font和center吗？我们使用它们是因为我们必须这样做，而不是因为我们想这样做。然后，就像90年代漫画书中的超级英雄一样，CSS出现了，它带来了选择器的力量。...摆脱基于表格的布局，转向CSS 进入21世纪初，基于表格的布局时代开始逐渐消退。还记得那些时光吗？当我们使用table、tr和td来安排页面上的一切，甚至连布局都是如此。啊，那些日子真是美好！...以下是我对其中一些功能感到兴奋的原因：容器查询目前尚未在Firefox和Safari中支持容器查询使得能够对子元素进行样式设置，并在布局中进行布局控制。...再次减少了使用JavaScript创建视差滚动、阅读指示器等功能的复杂性。你可以在这里看到一些很棒的演示。级联层（@layer）现在得到了广泛支持，在存在多个级联层的情况下，定义了优先级的顺序。

1K5 0

微信小程序实践：2.3 可滚动的容器组件之 scroll-view

像scroll-top、scroll-left这两个属性，它们是通过属性绑定、控制组件行为的属性。如果我们想让滚动实体滚动到某个位置，并不能直接调用它的一个类似于scrollTo()的方法。...现在在前端这一块，像vue、小程序这样的框架，把这个传统给颠覆了。直接传一个值，让组件自己负责更新，这样看起来更简单。...这是个复杂的容器。当需要时，使用refresher-enabled启用下拉动画的自定义。自定义可以很方便地实现这样的小人跑动动画： ?...下拉动画组件的背景色用#F8f8f8，前景色——包括图标与文本，用#888，这更符合微信设计规范。在下拉动画组件中，可以启用flexbox布局，参见上面的WXSS代码。...我在vue项目中曾实现过一个类似的长列表组件，以前推过文章，可以在这里查看：15 v-if 条件渲染与 v-for 列表渲染。

17.4K3 0

iOS秋招总结 = 面经 + 闲言碎语（不断更新）

如果让你来封装一个网络库，类似于Alamofire或者SDWebImage，你会如何实现？...GET和POST的区别是什么？对安全方面有何了解？如何应对web页面被劫持？了解HTTPS加密解密的过程吗京东京东总体来说还是体验不错的，和前两面的面试官相谈甚欢。...假设ViewController中需要用一个Blcok来改变ViewController中的一个属性，需要怎么实现？这样实现之后，这个Block在内存中被存在何处？引用关系又是怎么样的？...函数中的闭包，如果要求闭包执行完后立刻改变函数中某个变量的值，应该如何实现？如何实现一个类似于微信聊天界面的布局？...腾讯腾讯的面试真的非常的注重基础，两个面官都对iOS不是很懂，而且对项目也没有太深入的探讨，只是让说了一下项目的架构，感觉就是想确认一下这个东西是不是你自己做的。

1.9K4 0

双非大学生自学鸿蒙5.0零基础入门到项目实战 - 歌曲列表

前言通过前面基础内容的学习，现在我们通过一个小案例来测试一下，这里我用的是网易云的一个歌曲样式，大家可以用我这个，当然可以自己去随便找一个类似的，案例中可能会用到上一篇没有的知识点，大家也不用担心，...我会一点一点给大家进行代码分析实践为了和前面的只是做区分，我这里新建了一个页面，大家可以像我这样新建页面，这样系统会自动识别。...二、代码结构分层解析页面采用“Column（根容器）→ List（列表）→ ListItem（列表项）→ Row（横向布局） ”的嵌套结构，每层职责明确，符合ArkUI布局的“容器嵌套”设计思路。...根容器：Column 作为页面最外层容器，采用垂直布局，仅包裹一个List组件。设置width: '100%'，确保页面宽度占满屏幕，符合移动端全屏布局习惯。 2....列表容器：List + ListItem List：负责实现垂直滚动列表，自动处理超出屏幕内容的滚动逻辑，无需手动编写滚动代码。

1581 0

携程、阿里、京东、腾讯iOS春招面试过程以及面试题总结！

如果让你来封装一个网络库，类似于Alamofire或者SDWebImage，你会如何实现？...GET和POST的区别是什么？对安全方面有何了解？如何应对web页面被劫持？了解HTTPS加密解密的过程吗 * * * 京东京东总体来说还是体验不错的，和前两面的面试官相谈甚欢。...假设ViewController中需要用一个Blcok来改变ViewController中的一个属性，需要怎么实现？这样实现之后，这个Block在内存中被存在何处？引用关系又是怎么样的？...函数中的闭包，如果要求闭包执行完后立刻改变函数中某个变量的值，应该如何实现？如何实现一个类似于微信聊天界面的布局？...* * * 腾讯腾讯的面试真的非常的注重基础，两个面官都对iOS不是很懂，而且对项目也没有太深入的探讨，只是让说了一下项目的架构，感觉就是想确认一下这个东西是不是你自己做的。

1.8K0 0

《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

小白想：“layer要充满并遮挡整个浏览器窗口，而且滚动页面它还得一直保持遮挡的状态，把它设置为浮动类型（position:fixed）的容器最合适。...“可是父容器设置半透明会对他的子元素产生影响啊，这样会导致它里面的所有元素都变成半透明，你为啥不给窗口添加一个兄弟容器来实现这个效果呢？” 小白仔细想了想，说道：“哦！...我明白了，我可以在layer容器里面放一个跟layer一样大的容器，这样就不会冲突了，我再试试！”...不一会小白找到老朱，说道：“我改好了，现在我给dialog添加了一个layerbg容器作为背景层，然后把layer之前的背景色和透明度去掉，放到了新增加的背景层上面，背景层高和宽与layer一样所以这样就不会把...除了提示功能以外，你现在做的这个还能再进行深入修改，把它变成可以输入文字的prompt框，点击确定以后可以对页面或者数据库数据进行修改。”

2.2K10 0

界面设计技法之布局

回到主题，从最开始的css到如今的sass(less),开发的效率确实变得越来越高效，但是可能有时候我们还是会对页面布局产生烦恼的情绪，比如:"咦？我想让它显示在这个部位，它一点都不听话啊"。...唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。...其他的元素则不会调整位置来弥补它偏离后剩下的空隙。 fixed: 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。...这是微信端的展示，从中我们可以看出如果用百分比布局来做界面比较明朗的界面的话，那在兼容多种终端上，它能帮我们省下不少力气，另外该项目已经开源，喜欢的朋友可以去star一下哟；项目地址 ?...媒体查询 “响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

1.7K1 0

防御式CSS是什么？这几点属性重点防御！

这里，你可能会考虑多行换行，但现在，我们先关注距。如果标题有空格和文本截断，我们不会看到这样的问题。...在过去的几年里，有一些黑科技来实现这一点，但现在，我们只需要使用CSS 即可，这要感谢overscroll-behavior CSS属性。在下面的图中，可以看到默认的滚动链接行为。...为了解决这个问题，我们可以简单地用 min-width 代替 width。...在我看到的这个例子中，开发者给二级导航添加了 position: sticky，这样它就可以粘在底部了。然而，如果浏览器的高度较小，bug 就来了。注意这两个导航是如何重叠的。...好多了，对吗？可能有更好的方法来实现这一行为（比如使用 margin-auto），但在这个例子中专注于垂直查询。 10.

5.8K3 0

老板的手机收到一个红包，为什么红包没居中？

这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。...行内元素水平居中给父容器设置： text-align: center; 行内元素垂直居中让文字的行高等于盒子的高度，可以让单行文本垂直居中。...方式3：flex 布局（待改进）将父容器设置为 Flex 布局，再给父容器加个属性justify-content: center，这样的话，子元素就能水平居中了；再给父容器加个属性 align-items...参考文章：探秘 flex 上下文中神奇的自动 margin[1] 垂直居中的典型应用场景：红包幕帘/弹窗问题引入就拿“弹窗”这一点来说，现在大家的弹窗都是各种样式、各种布局满天飞。...补充： 1、如果你的页面中，有很多弹窗，建议将弹窗封装成一个抽象组件。 2、任何弹窗，都需要解决“滚动穿透”的问题，本文篇幅有限，请自行查阅。最后一段有些实现方式虽然简单，但必须要经得起千锤百炼。

1.3K2 0

手撸一个前端天气卡片

在写天气卡片前，我只使用过一次Web Components，那是在原神玩家信息查询中，当时是因为有很多重复的要素（角色信息），所以想尝试用这个新鲜玩意封装一下。...然而DW的天气图标并没有采用上述的两种方式。我对图标部分使用Web Components做了封装，已经是类似symbol的作用，因此再使用symbol便显得有些多此一举。...封装后的天气图标调用就方便多了，可以直接使用这样的代码来调用特定的图标，下面是一个示例。...我需要保证卡片中的所有元素都能有条不紊地展现出来，我原本想要固定每一种样式的卡片宽度，这样能够确保卡片的布局总是完美的，但是会使天气卡片的泛用性大打折扣，其他使用DW的人并不会专门为了一个小组件而修改自己的布局方案...一般来说，我常用的方法是在父容器中嵌入一个iframe，通过iframe的尺寸变化监听容器尺寸变化，或许未来也可以试试css容器查询（Container Queries），能够提供很大便利，不过目前这个特性还处在

2.3K5 0

打造一款会呼吸的滚动条

我并不是单纯想做个样式好看的滚动条，我想让它“动”起来，能根据滚动速度做出反应，滑得快的时候拖尾长一点、闪一点颜色，慢的时候就温柔点，像水一样。...我的目标是让它感觉像一个有温度的 UI，而不只是一个滑块。...技术栈方面，其实蛮简单：用 canvas 自己画滑块和拖尾；用 requestAnimationFrame 做高帧率动画；根据 scrollTop 变化计算滚动速度；用粒子系统来模拟流体轨迹；整个模块尽量封装...最终打包成组件后来我把整个逻辑封装成了一个类，可以直接挂载：const scrollFX = new FluidScrollbar('#scroll-wrapper')scrollFX.init()甚至还留了配置项...说实话，做好之后我自己挺满意的。虽然只是一个滚动条，但它的细节、动效、跟手性都做到了我想要的程度。平常滚页面没啥感觉，现在看到那一串彩色粒子随着滚动拖出来，就像是在点亮页面一样。

2801 0

WEBAPP开发技巧总结

因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。 6、自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik...10、如何禁止用户旋转设备我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。...1 我们可以用一个比较龌龊的办法来解决。

3.4K2 0

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

因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。 6、自适应布局模式在编写CSS时，不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...为达到适配各种手持设备，建议前端工程师使用自适应布局模式，因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，...10、如何禁止用户旋转设备我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！...通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。... 我们可以用一个比较龌龊的办法来解决。

2.9K2 0

前端优秀实践不完全指南

一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：急速的打开速度眼前一亮的 UI 设计酷炫的动画效果丰富的个性化设置便捷的操作贴心的细节...利用了 flex 布局下的 flex-grow: 1，让 .main 进行伸缩，占满剩余空间，利用 min-width 保证了整个容器的最小宽度。当然，这是最基本的自适应布局。...譬如我们页面上随处可见 loading 效果，其实就是这样一种作用，让用户感知页面正在加载，或者正在处理某些事务。 ? 滚动优化滚动也是操作网页中非常重要的一环。...先说结论，控制滚动层级的意思是尽量让需要进行 CSS 动画（可以是元素的动画，也可以是容器的滚动）的元素的 z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），...原因在于浏览器是通过读取标签的 href 属性，来展示类似在新标签页中打开页面这种选项，对于上述的写法，浏览器是无法识别它是一个可以跳转的链接。简单的示意图如下： ?

1.3K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭