horizontal-scrolling 相关问题

有没有办法让 MUI 数据网格始终保持水平滚动条可见？

我有一个启用了列虚拟化的数据网格表。该表上始终有 > 25 列。带触控板；然而，用户可以快速水平滚动，无需 tr...

Next.js 中不需要的水平滚动条

我正在 Next.js 中编码，发现项目中的每个子页面上都会出现不需要的水平滚动条，允许滚动大约 30px 或其他内容。有趣的是这个滚动条

如何使用 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> 通过这些更改，您的表格应该具有固定的宽度和高度，并且可以在移动设备上水平滚动。

回收视图FlexboxLayoutManger问题

滚动回收视图并从一个片段移动到另一个片段后，当您返回到同一片段时，回收视图不可见 （将回收视图与 FlexboxLayoutManger 结合使用） 回收...

如何使用 HTML、CSS 和 React 创建水平滚动组件？

我正在制作一个水平滚动组件，如 Instagram 故事。但我不知道该怎么做？ 这是我想要做的： .scroller{ 高度：125px； 宽度：300px； 背景...

如何在 Flutter 页面中创建双向滑动？

我很想知道如何使 PageView 小部件能够同时向两个方向滑动，就像我们在 TikTok 应用程序中看到的那样，您可以垂直滑动视频以更改它们，...

横竖混合滚动

你好，我的网站遇到了一个问题，我希望用户通常垂直滚动，但是当他到达那个特定的容器时，它会水平滚动，直到容器在我的水平线上……

ListView 中的 WPF 水平滚动条不适用于鼠标滚轮滚动

我有一个 ListView，其中有很多水平排列的项目，如果我按住滚动条然后移动它，我可以滚动 ListView，但是我想用鼠标滚轮向上/向下滚动 ListView

无法有效使用 Flexbox Horizontal 属性

...

react-horizontal-scrolling-menu 滚动错误

**你好，我遇到了反应水平滚动菜单的问题 ，滚动的时候，向右滚动了很多，剩下的元素就消失了，当你加上 overflowX: 'scroll' 到 t...

网站的两页横向滚动。其他页面没问题

我的网站上有两个页面让用户横向滚动，而网站上的其他页面都很好。所有其他页面都很好，所以我只能认为这是一半的横幅图片导致的......

结合 CSS 滚动捕捉使用垂直鼠标滚轮进行水平滚动

我正在尝试将垂直鼠标滚轮用户输入映射到水平滚动，同时保持与本机 CSS 滚动捕捉的兼容性。让页面水平滚动是相当容易的

Horizontal scroll flexbox - Flex-direction column: child image exceeds height of parent instead of filling height

我正在尝试使用 flexbox 制作一个水平可滚动的图片库，但我无法使图片高度增长以填满容器高度，同时保持固定的纵横比。 我...

React 组件扩展导致水平滚动条

我是 React 的新手，想知道如何解决这个前端错误。 我有这个页面。它有一个侧边栏，然后在左侧是一个新闻提要（社交媒体帖子的一小部分）和

如何在手机上显示自定义水平滚动条？

我在 elementor 中使用自定义 css 制作了自定义水平滚动条，它适用于桌面视图但不适用于移动视图，我缺少什么？以下是我使用的自定义 css .

在移动设备中使用 html 中的 javascript 的水平滚动问题

我有一个水平滚动的网站，可以在桌面上完美运行，对于我使用 javascript 的页面，如下所示： 变量项 = {}; item.name = "#home-page"; item.stackOrder = 99; ...

如何让元素在移动设备上水平滚动而不只是调整大小？

这是我要设置样式的 HTML： 这里有一些文字 &... 这是我要设置样式的 HTML： <div id="cards-text-wrap"> <h1 class="text">Some text here</h1> <div class="card-wrapper"> <div class="scrollable-card"></div> <div class="scrollable-card"></div> <div class="scrollable-card"></div> <div class="scrollable-card"></div> <div class="scrollable-card"></div> </div> </div> 我想让“可滚动卡片”div 实际上可以滚动（横向）。现在它们只是调整大小以适应同一条线，这意味着它不会在 Y 轴上溢出，这很好。但它并没有在 x 轴上溢出，这正是我想要的。 我尝试了一堆不同的方法，所有这些都导致了同样的错误结果。在这个例子中，我使用 overflow-x 试图让它溢出视口，但它仍然没有这样做。 CSS 看起来像这样： #cards-text-wrap { background: #D9D9D9; width: auto; height: 300px; margin: 230px 0 0 0; text-align: center; } .text { background: #D9D9D9; margin: 10px 0 0 0; text-align: center; font-size: 2rem; } .scrollable-card { width: 180px; height: 210px; background: white; border-radius: 26px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; display: inline-block; margin: 0 20px; resize: none; } .card-wrapper { display: flex; flex-wrap: nowrap; height: 210px; overflow-x: scroll; width: auto; margin-top: 10px; } 我从中得到的结果是最外层的 div 看起来不错，文本看起来也不错，但是元素被压缩到大约 40 像素，而不是它们设置的 180 像素宽度。它在 x 轴上也根本没有溢出。 我在这里做错了什么？ 试试这个： #cards-text-wrap { background: #D9D9D9; width: auto; height: 300px; margin: 230px 0 0 0; text-align: center; } .text { background: #D9D9D9; margin: 10px 0 0 0; text-align: center; font-size: 2rem; } .scrollable-card { min-width: 180px; height: 210px; background: white; border-radius: 26px; white-space: nowrap; margin: 0 20px; width: 100%; } .card-wrapper { display: flex; flex-wrap: nowrap; height: 210px; overflow-x: scroll; width: auto; margin-top: 10px; } <body> <div id="cards-text-wrap"> <h1 class="text">Some text here</h1> <div class="card-wrapper"> <div class="scrollable-card"></div> <div class="scrollable-card"></div> <div class="scrollable-card"></div> <div class="scrollable-card"></div> <div class="scrollable-card"></div> </div> </div> </body>

iOS UICollectionView水平滚动矩形布局，里面的物品大小不一样？

iOS UICollectionView如何创建水平滚动的矩形布局，里面的项目大小不同。我想使用UICollectionView创建一个像下面这样的矩形布局，我如何能...

是否可以在同一页面上水平和垂直滚动？

我正在尝试建立一个网站，该网站可以使用键盘上的箭头键或在手机/平板电脑上滑动来移动到各个部分。我正在使用FullPage。是否可以有一个像网站这样的网格，用户可以在其中...

用于移动应用程序的离子反应-水平滚动，其中包含屏幕外的元素

我正在使用Ionic React来构建移动应用。我想创建一个超出屏幕宽度的水平可滚动组件以显示类别。我似乎找不到适合使用的离子组件...