horizontal-scrolling 相关问题

多个水平回收器视图在垂直回收器视图内同步滚动

我有一个垂直的RecyclerView，其中每一行都是一个水平的RecyclerView。 我想要做的是，无论你滚动哪个水平 RecyclerView，所有其他的都会一起滚动。 ...

使用“react-horizontal-scrolling-menu”时在笑话测试用例中出现语法错误

我正在使用“react-horizontal-scrolling-menu”为表格创建水平滚动。现在代码工作正常，但是当我尝试为包含以下内容的组件编写测试用例时 我...

单击水平滚动元素内的锚链接时，Div 滚动到页面顶部

我正在尝试用纯 CSS 创建一个水平滑块 由于某种原因，单击锚链接在 x 轴上滚动元素也会在 y 轴上滚动整个页面，将

在适配器中的多个RecyclerView上同步滚动

我想在垂直RecyclerView中实现水平RecyclerView。 最终结果应该是这样的： 因此，对于垂直 RecyclerView 中的每个元素，我需要水平中的另一个元素......

最后一个项目滚动后水平寻呼机行为异常

我使用固定宽度为 282.dp 的 pageSize 属性，但是在最后一个项目之后滚动时，滚动需要一段时间才能返回到正常位置，并且如果另一个垂直滚动发生...

使用scrollLeft属性进行水平滚动不起作用

在我解释问题之前：我知道有人问了一个非常相似的问题，但我无法用那些人的回答来解决它。 :/ 我正在尝试用“轮子”从头开始构建水平滑块

水平滚动与scrollLeft不起作用

在我解释问题之前：我知道有人问了一个非常相似的问题，但我无法用那些人的回答来解决它。 :/ 我正在尝试用“轮子”从头开始构建水平滑块

iOS中如何锁定scrollView的水平滚动

我有一个滚动视图。我希望它只向一个方向滚动（垂直）。有没有办法可以锁定水平滚动...？ ...

在WPF中创建一个自定义ScrollViewer，它可以正常调整元素大小，并在子宽度小于其最小值时显示水平滚动条？

我正在开发一个 WPF 应用程序，我需要创建一个自定义 ScrollViewer，它可以根据可用宽度自动调整其子元素的大小。另外，当c的最小宽度...

如何使用 MUI Grid 在 ReactJS 上进行水平滚动

我希望容器方向为md尺寸屏幕上方的“行”和md尺寸屏幕下方的“列”？我该如何实施？ 我正在尝试使用 MUI 网格滚动到地平线。 <...

sapui5 如何在sap.m.Table中保持水平滚动条

我创建了一个包含 15 列的 sap.m.Table，如何为该特定表创建水平滚动条，我尝试过 滚动容器。但这没有用。有人可以帮我提供吗

flutter web - 水平singlechildscrollview无法通过鼠标点击和拖动进行滚动

我想通过单击并拖动来滚动行中的项目。 当我尝试通过单击并拖动滚动时，它没有任何反应....................................... ................................................

CSS 水平滚动溢出与 jQuery 滑块

我正在尝试设置全屏 jquery 滑块。我将项目分为两个步骤 1) css 和 2) js。 1）CSS，下面是我要拍摄的图片（没有固定高度），下面是...

移动设备上的水平滚动/溢出问题

这个网站：occecvision.org 在我的手机（iPhone，尚未检查 Android）上的内容两侧有水平滚动/空白。 我已经尝试过 body, html {overflow-x:

水平滚动不适用于 ViewPager2 Android 中的 RecylerView

我正在尝试在 ViewPager2 内实现 Horizontal RecyclerView，但它不起作用。 我正在尝试在 ViewPager2 中实现 Horizontal RecyclerView，但它不起作用。 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black" android:paddingLeft="10dp" android:paddingRight="10dp"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/rvMusicList" android:layout_width="match_parent" android:layout_height="wrap_content" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" android:orientation="horizontal" tools:listitem="@layout/items_music" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="30dp"/> ... 我的 Kotlin 代码如下 rvBottomMenu.apply { layoutManager = LinearLayoutManager(this@MainActivity, RecyclerView.HORIZONTAL, false) adapter = bottomMenuAdapter setHasFixedSize(true) } 我尝试了以下链接解决方案，但没有成功： 文字 你可以这样尝试！内部视图寻呼机适配器，同时设置回收器视图适配器将 LinearLayoutManger 设置为水平 recylcerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.HORIZONTAL, false));

有没有办法让 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； 背景...