scrollable 相关问题

如何使 TWebTableControl 在 TMS WEB Core 中可滚动？

我的表单上有一个 TWebTableControl 组件，其中有数百行，但我只看到几行，并且无法在表格组件中滚动，因为没有滚动条。 ..

模态叠加内的可滚动菜单列表向上跳跃

我有一个菜单组件，可以打开一个可滚动的菜单列表。当它位于模态叠加层之外时，它可以毫无问题地滚动。不过，当放置在模态叠加层中时，它会遇到麻烦

Flutter的scrollable_positioned_list没有正确处理索引

我正在尝试创建不同高度的项目（容器）的垂直列表，可以使用 ScrollablePositionedList.builder 滚动到固定位置。为了管理我的项目列表，我...

如何在可滚动元素中使用工具提示？

我有一个可以在 x 方向滚动的元素，其中包括工具提示： .nav-项目{ 宽度：120px； } .scroll-container { 宽度：100%； 溢出-x：自动； 溢出-y：隐藏；

如何在可滚动元素中使用工具提示？

我有一个可以在 x 方向滚动的元素，其中包括工具提示： 我有一个可以在 x 方向滚动的元素，其中包括工具提示： <div class="scroll-container"> <ul class="nav nav-tabs mt-4"> <div class="nav-item"> <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <span class="tooltip__content"> <a>Action 1</a> </span> </span> </div> </div> <div class="nav-item"> <div class="nav-link d-flex vertical-center"> <span class="tooltip"> <span class="tooltip__content"> <a>Action 2</a> </span> </span> </div> </div> </ul> </div> 滚动容器的样式是： .scroll-container { width: 100%; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #dee2e6; } 以及工具提示的样式： .tooltip { position: relative; display: inline-block; .button { margin: 0; } .tooltip__content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; min-width: 120px; z-index: 2; display: block; margin-top: 10px; padding: 4px 8px; background: #445e5f; border-radius: 4px; font-size: 12px; color: #fff; text-align: center; text-transform: none; white-space: normal; font-weight: normal; visibility: hidden; opacity: 0; transition: all 0.25s ease-out; &:after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 5px solid transparent; border-bottom: 5px solid #445e5f; } &--wide { min-width: 240px; } } &:hover .tooltip__content { visibility: visible; opacity: 1; } } 这向我展示了这样的视图： Action 1 下方的小三角形是工具提示。如果我删除overflow-x:auto 和overflow-y:hidden 工具提示将按我预期的方式工作，但这次可滚动功能消失了。如何将可滚动（overflow-x：auto；和overflow-y：hidden；）和工具提示一起使用？ 这里是完整代码：https://jsfiddle.net/w6bfzduk/51/ 抱歉，您的 CSS 不完整，我无能为力。

Flutter PageView 具有可滚动页面（不包括分页区域）

我的主要问题是 PageView 第一个子级中的内容，如果垂直滚动内容，您将看到 Text('Hello') 在 PageIndicator 后面。如何创建 Pag...

滚动时粘性横幅上方有间隙

在 div 内滚动时，我编写了一个由图像和 h2 组成的横幅，以粘贴到所述 div 的顶部。当位于 div 顶部时，横幅上方没有间隙，但是当 scr...

Flutter ListView 具有不同的小部件和列表项

我不确定我是否遗漏了一些东西。我正在玩 Flutter，我想用一些文本小部件、按钮和其他小部件构建一个（简单）视图（见下图）。这些小部件应该...

如何使用 slivers 使 flutter 页面可滚动

我正在尝试在 CustScrollView 中实现一个条子，下面是我的代码 @覆盖 小部件构建（BuildContext上下文）{ 返回脚手架（ 主体：自定义滚动视图（ 条子：[ ...

添加 UIScrollView 来实现超级视图并添加其内容来实现除安全区域之外的所有内容

简而言之，我想实现以下目标： 内容显示在底部安全区域后面，但用户可以滚动它。 这是用 UITableView 实现的，默认情况下有这样的行为，但我需要做...

如何在 Flutter 中使表单可滚动

所以我正在尝试制作一个应用程序，让用户填写几个表单字段并在用户提交表单时处理信息。我的问题是我似乎不知道如何制作...

Quarto Revealjs 演示文稿无法在浏览器中向下滚动

我正在尝试用revejs格式的四开本准备讲座幻灯片（之前使用xaringan效果很好）。 当我使用任何浏览器（Firebox、Chrome、Edge）打开渲染的 html 时，我无法...

在可滚动框架上使用鼠标滚轮

我在 tkinter 上工作，这里提供了一个可滚动框架类： https://gist.github.com/mp035/9f2027c3ef9172264532fcd6262f3b01 这个类的实际代码是： 类 ScrollFrame(ttk.Frame): ...

带有 SingleChildScrollView 的滚动条未从滚动容器的顶部开始

我在 Flutter 中创建了一个测验应用程序。在测验开始之前，玩家将进入特定测验的开始页面。此页面包含带有标题和背景图像的标题，以及带有...

如何包裹“AspectRatio”小部件以避免黄/黑溢出线？

这是我的代码（完整的项目代码：https://github.com/mitchkoko/responsivedesign）： 导入“包：flutter/material.dart”； 导入'包：flutter/rendering.dart'; 类 MyDesktopBody 扩展...

如何在SliverList中添加定位堆栈并使其可滚动，就像我们滚动时顶部图像部分将隐藏并只能看到appBar&scroll

这里我粘贴了我想要实现的视频链接，请帮忙，我想在可滚动侧的顶部添加一个容器，并且容器的某些部分应该位于应用程序b的末尾...

启用滚动后如何以角度对齐未对齐的 p 表标题？

我有一张带有身体的p表。在启用滚动之前，标题和正文中的复选框以及其他标题对齐是完美的。但是添加 [scrollable]=true 和scrollHeight="200px" 之后...

如何使用 tailwind css 使表格可水平滚动而不是整个页面

我的代码不起作用。我已经为表格编写了这段代码，我想修复它的宽度和高度，对于移动视图，它应该是水平滚动的 我的代码不起作用。我已经为表格编写了这段代码，我想修复它的宽度和高度，对于移动视图，它应该是水平滚动的 <div class="table-wrp block min-h-96"> <table class="w-full"> <thead class="bg-white border-b sticky top-0"> <th scope="col" bgcolor="#45abe0" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 1</th> <th scope="col" bgcolor="#ff661b" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 2</th> <th scope="col" bgcolor="#0099a8" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 3</th> <th scope="col" bgcolor="#00539f" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 4</th> <th scope="col" bgcolor="#76bc21" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center">TRACK 5</th> </th> </thead> <tr class="flex-none flex-shrink-0"> <td scope="col" bgcolor="#74c0e8" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center"> <h4>Getting Help Early</h4> </td> <td scope="col" bgcolor="#ff8c54" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center"> <h4>Getting the Best Possible Care&nbsp;</h4> </td> <td scope="col" bgcolor="#40b2be" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center"> <h4>Getting Diverted from Justice System Involvement</h4> </td> <td scope="col" bgcolor="#407eb7" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center"> <h4>Research Updates</h4> </td> <td scope="col" bgcolor="#9bcd61" class="flex-shrink-0 border-1 border-solid border-white p-4 text-xs font-bold text-white text-center"> <h4>Youth Voices</h4> </td> </tr> <tr> <td bgcolor="#fdedcc" colspan="5" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon#Research_Plenary" style="font-size:12px;line-height:normal;">Plenary with Joshua Gordon, M.D., Ph.D. Director of the National Institute of Mental Health</a></td> </tr> <tr> <td bgcolor="#fdedcc" colspan="5" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon#Trauma" style="font-size:12px;line-height:normal;">The Psychological Toll of Racial Trauma on African Americans: A Panel Discussion</a></td> </tr> <tr> <td bgcolor="#d1eaf7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Taking" style="font-size:12px;line-height:normal;">Taking NAMI Ending the Silence Statewide</a></p> </td> <td bgcolor="#ffd9c6" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Rethinking" style="font-size:12px;line-height:normal;">Rethinking Diversity, Equality and Inclusion</a></p> </td> <td bgcolor="#bfe5e9" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Crisis_Hotlines" style="font-size:12px;line-height:normal;">Crisis Hotlines: The Gateway to Crisis Systems&nbsp;</a></p> </td> <td bgcolor="#bfd4e7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#CBT" style="font-size:12px;line-height:normal;">CBT for Psychosis: Evidence-based Training Program for Family and Caregivers</a></p> </td> <td bgcolor="#bddd96" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Importance" style="font-size:12px;line-height:normal;">The Importance of Youth Voice: A Panel Discussion</a></p> </td> </tr> <tr> <td bgcolor="#d1eaf7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Black_Youth" style="font-size:12px;line-height:normal;">What Is Behind the Increasing Suicide Rate Among Black Youth?</a></p> </td> <td bgcolor="#ffd9c6" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Engaging_Faith" style="font-size:12px;line-height:normal;">Engaging Faith Leaders in Addressing Mental Illness</a></p> </td> <td bgcolor="#bfe5e9" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Hero" style="font-size:12px;line-height:normal;">Hero Help Addiction and Behavioral Health Assistance</a></p> </td> <td bgcolor="#bfd4e7" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#Fusion" style="font-size:12px;line-height:normal;">The Fusion Model: A Peer-Informed Model for Crisis Support</a></p> </td> <td bgcolor="#bddd96" class="border-1 border-solid border-white p-4 text-xs font-bold text-center"> <p><a href="/Get-Involved/Attend-the-NAMI-National-Convention/Past-Conventions/2020-Virtual-NAMICon/2020-Virtual-NAMICon-Sessions#NAMI-Ending" style="font-size:12px;line-height:normal;">NAMI Ending the Silence (ETS) for Students</a></p> </td> </tr> </table> 请针对此问题提出一些解决方案。 我已经尝试了从溢出x滚动到将div的高度设置为修复和块的所有方法，但没有任何效果。 您似乎想创建一个具有固定宽度和高度的表格，并使其在移动设备上水平滚动。我注意到你正在使用 tailwind CSS 类来设计你的表格。要实现所需的行为，您可以对代码进行以下更改： 将表格包裹在固定高度的容器div内，并设置其 溢出到自动以启用滚动： <div class="table-wrp block min-h-96 overflow-x-auto"> <table class="w-full"> <!-- Your table content goes here --> </table> </div> 修改表结构，去掉不必要的类，使其更简单： <div class="table-wrp block min-h-96 overflow-x-auto"> <table class="w-full"> <thead class="bg-white border-b sticky top-0"> <tr> <th bgcolor="#45abe0" class="p-4 text-xs font-bold text-white text-center">TRACK 1</th> <th bgcolor="#ff661b" class="p-4 text-xs font-bold text-white text-center">TRACK 2</th> <th bgcolor="#0099a8" class="p-4 text-xs font-bold text-white text-center">TRACK 3</th> <th bgcolor="#00539f" class="p-4 text-xs font-bold text-white text-center">TRACK 4</th> <th bgcolor="#76bc21" class="p-4 text-xs font-bold text-white text-center">TRACK 5</th> </tr> </thead> <tbody> <tr> <td bgcolor="#74c0e8" class="p-4 text-xs font-bold text-white text-center"> <h4>Getting Help Early</h4> </td> <td bgcolor="#ff8c54" class="p-4 text-xs font-bold text-white text-center"> <h4>Getting the Best Possible Care&nbsp;</h4> </td> <td bgcolor="#40b2be" class="p-4 text-xs font-bold text-white text-center"> <h4>Getting Diverted from Justice System Involvement</h4> </td> <td bgcolor="#407eb7" class="p-4 text-xs font-bold text-white text-center"> <h4>Research Updates</h4> </td> <td bgcolor="#9bcd61" class="p-4 text-xs font-bold text-white text-center"> <h4>Youth Voices</h4> </td> </tr> <!-- Additional table rows here --> </tbody> </table> </div> 此外，请确保在 HTML 的 head 部分设置视口元标记，以确保在移动设备上正确呈现： <head> <!-- Other meta tags and stylesheets --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> 通过这些更改，您的表格应该具有固定的宽度和高度，并且可以在移动设备上水平滚动。

只有“查看者”权限的人不会滚动 Google 表格注释

当我授予一个人“查看者”访问带有单元格注释的 Google 工作表时，他们无法访问整个单元格注释。当他们打开笔记时，笔记已经滚动到 bo...

引导行中的水平可滚动 div

我正在尝试制作一个水平可滚动的引导程序行。该行包含包装在 div 中的客户评论。每个推荐div的宽度为33.333%。 空白：nowrap 和显示：内联...