滚动是指内容在显示屏上的连续滑动。
脚手架 TopAppBar 的 TopAppBarScrollBehavior 在非 LazyColumn 时不起作用
我正在尝试将 TopAppBarScrollBehavior 用于 Scaffold 内的 TopAppBar。但我的内容不是 LazyColumn。它是一个具有滚动状态的常规列。 这是我的代码 脚手架（ 修饰符 = Mod...
我遇到了页面中不必要滚动的问题，我尝试了各种选项，例如：overflow：'hidden'，但问题是，其他JavaScript组件，它们都包装在相同的
window.setInterval("reloadIFrame();",500); 函数 reloadIFrame() { document.getElementById("myIframe").src="/chatbox/"; //滚动顶部=
我正在使用react-fast-marquee来做水平滚动动画，并且我给它添加了缩放效果
我有以下代码，它按照我想要的方式工作大约 90％，它从右向左滚动，并且我添加了一个检查以查看图像何时到达页面的中心，它应该缩放 i ...
我有一个滚动视图，其中的内容正在通过ajax查询刷新（增加其大小）。 我希望当用户将滚动条放在底部时（就像所有IDE中常见的那样），滚动条
有人可以向我解释一下 ScrollView 的工作原理吗？当我收到一条消息时，如何滚动到最后一条消息（ item ）？ 我尝试用 ScrollViewReader { prox...
我在我的React Web应用程序中使用overflow:auto。 但滚动 ID 很宽。我可以减少div组件滚动的宽度吗？ 下面是代码片段 - 我在我的React Web应用程序中使用overflow:auto。 但滚动 ID 很宽。我可以减少div组件滚动的宽度吗？ 下面是代码片段 - <div style={{display:"flex", overflow:"auto"}}> {....} </div> 如果您想通过内联样式专门控制React组件中滚动条的宽度，您可以使用Firefox的scrollbarWidth属性以及IE和Edge的MsOverflowStyle。 import React from 'react'; const MyComponent = () => { const containerStyle = { display: 'flex', overflow: 'auto', scrollbarWidth: 'thin', // For Firefox MsOverflowStyle: 'none', // For IE and Edge }; return ( <div style={containerStyle}> {/* Your content goes here */} </div> ); }; export default MyComponent; 在此示例中： scrollbarWidth: 'thin' 用于 Firefox 设置细滚动条。 MsOverflowStyle: 'none' 用于 IE 和 Edge 隐藏默认滚动条。 请记住，并非所有浏览器都支持scrollbarWidth，因此此解决方案可能不适用于所有地方。另请注意，由于浏览器安全性和一致性问题，样式滚动条通常受到限制。如果对滚动条外观的精确控制至关重要，您可能需要考虑使用自定义滚动条库或提供此级别自定义的第三方组件。 React 中自定义滚动条库的建议 我正在寻找为滚动条提供高级自定义选项的 React 库的建议。以下是我发现的一些选项： 反应自定义滚动条 npm：反应自定义滚动条 描述：该库允许您完全自定义 React 应用程序中滚动条的外观和行为。 反应滚动条 npm：反应滚动条 描述：React-scrollbar 是一个简单、轻量级的滚动条组件，可以自定义以适合您的设计。 反应完美滚动条 npm：react-perfect-scrollbar 描述：该库为 React 提供了一个完美的滚动条组件，具有多种自定义选项。 simplebar-react npm：simplebar-react 描述：SimpleBar 是一个简单且轻量级的自定义滚动条库。它不是特定于 React 的，但有一个可用的 React 包装器。 反应滚动条自定义 npm：react-scrollbars-custom 描述：该库为React提供了一个高度可定制的滚动条组件。 在选择库之前，请务必检查其文档和功能，看看它们是否满足您的特定要求。每个库可能有自己的一组功能、API 和自定义选项。
当父级到达滚动末尾时，如何使子级 listView 滚动 使用我的代码我可以实现这一点，但是您可以在按住时停止中间滚动，并禁用父级并启动 c...
我在页面中有一个垂直滚动的 div，它也可以垂直滚动。 当子div用鼠标滚轮滚动并到达滚动条的顶部或底部时，页面（body）b...
新的 Flutter 开发人员 --> 我已经查看了许多有关滚动的问题，并且基于实现它看起来具有挑战性。试图想出标准方法但无法让它滚动......
当尝试 glassmorphism 样式并使用 css 背景过滤器时，滚动时我会在元素顶部看到深色模糊边缘。我觉得这应该是一个简单的解决方案，但我已经尝试了所有...
我正在尝试创建一个表。我希望它的第一列得到修复。我已经使用以下方法完成了 tr > th：第一个孩子， tr > td:第一个孩子 { 位置：粘性； 左：0； } ...
CSS“溢出”生成的滚动条在鼠标上正常工作，但在使用手写笔时以相反的方向工作。用手写笔，这样的滚动条的手柄是无法拖动的...
所以这就是我真正想做的事情， 我正在创建一个网络应用程序，允许通过转动旋钮来调谐电台，但是我不确定如何做到这一点，我知道 onClick 和那种类型的
我正在开发一个钩子，用于跟踪用户向下滚动页面的最大深度。 我想在 useEffect 的清理函数中使用这个值，以便我可以记录该值...
如何滚动tableView到新添加的一行，不一定是底部或顶部？
标题已经说明了一切。我正在设计一个应用程序，它接受用户的输入并将内容添加到表中。 但是，我正在使用优先级意识，因此如果用户选择“紧急”优先级...
在使用可滚动listview.builder时使用SingleChildScrollView（颤动）
这是我的整个代码： 导入“包：flutter/material.dart”； 导入'包：testproject/components/event_tile.dart'； 导入'包：testproject/components/mybutton.dart'； 类 MenuPage 扩展
在使用可滚动listview.builder（颤振）时使用单个singlechildscrollview
这是我的整个代码： 导入“包：flutter/material.dart”； 导入'包：testproject/components/event_tile.dart'； 导入'包：testproject/components/mybutton.dart'； 类 MenuPage 扩展
保持按钮禁用，直到用户到达 Angular Material 对话框中文本段落的末尾
我正在使用 Angular Material 的 MatDialog 来显示文本段落和末尾的按钮。 如何保持按钮禁用，直到用户向下滚动并到达该段落的底端...
。应用程序 { 字体系列：无衬线字体； 文本对齐：居中； 。孩子 { 左内边距：100px； 右内边距：100px； 高度：100vh； 溢出-y：滚动； } .ch...</desc> <question vote="0"> <div> </div> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><html> <style> .App { font-family: sans-serif; text-align: center; .child { padding-left: 100px; padding-right: 100px; height: 100vh; overflow-y: scroll; } .child::-webkit-scrollbar { display: none; } } </style> <body> <div class="App"> <div class="parent"> <div class="child"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue non. Donec eget urna venenatis, viverra sapien in, bibendum eros. </p> <p> Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae, semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi. </p> <p> Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius, augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue non. Donec eget urna venenatis, viverra sapien in, bibendum eros. </p> <p> Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae, semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi. </p> </div> <div> Nunc feugiat, odio quis consectetur faucibus, mauris justo hendrerit mauris, in facilisis sapien felis sed est. Cras lacus odio, tempus vel luctus ut, commodo id odio. Suspendisse euismod rutrum dui, non congue ligula cursus ut. Nulla at semper sapien. Morbi nec libero placerat, suscipit erat ut, malesuada orci. In in purus convallis, luctus diam nec, sollicitudin tortor. Proin pretium sagittis quam, eget dignissim urna vehicula eget. Mauris id malesuada sem, nec hendrerit lacus. Proin ut justo neque. </div> <div> In hac habitasse platea dictumst. Phasellus vel tempor dui. Vivamus ut elementum ex. Sed a tempus leo. Nunc ut ipsum non lacus cursus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis erat ligula. Quisque ultricies nulla tortor, et tempus felis vestibulum malesuada. Nulla facilisi. Mauris id dui sodales ante aliquet suscipit. Aliquam viverra, ante laoreet bibendum vestibulum, dolor elit vulputate urna, ut lobortis tellus tortor nec felis. </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> <p>我有两个嵌套容器。第一个显示的滚动到末尾，另一个在第一个结束时开始滚动。</p> <p>现在，从第一个容器到第二个容器的转换发生在滚动稍微停止之后。我需要让这个过渡更加顺利。如有任何帮助，我们将不胜感激。</p> <p>谢谢！</p> </question> <answer tick="false" vote="0"> <p>为了实现两个容器之间更平滑的过渡而不导致滚动明显停止，您可以使用 JavaScript 来同步两个容器之间的滚动。以下示例展示了如何修改 HTML 并添加简单的 JavaScript 脚本来实现此效果：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <html> <style> .App { font-family: sans-serif; text-align: center; } .parent { display: flex; flex-direction: column; } .child { padding-left: 100px; padding-right: 100px; height: 100vh; overflow-y: scroll; } .child2 { padding-left: 100px; padding-right: 100px; height: 100vh; overflow-y: scroll; } .child, .child2 { scrollbar-width: thin; scrollbar-color: transparent transparent; } .child::-webkit-scrollbar, .child2::-webkit-scrollbar { width: 12px; } .child::-webkit-scrollbar-thumb, .child2::-webkit-scrollbar-thumb { background-color: transparent; } </style> <body> <div class="App"> <div class="parent"> <div class="child" id="container1"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue non. Donec eget urna venenatis, viverra sapien in, bibendum eros. </p> <p> Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae, semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi. </p> <p> Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius, augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue non. Donec eget urna venenatis, viverra sapien in, bibendum eros. </p> <p> Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae, semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi. </p> </div> <div class="child2" id="container2"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue non. Donec eget urna venenatis, viverra sapien in, bibendum eros. </p> <p> Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae, semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi. </p> <p> Phasellus tincidunt sem sit amet ultrices sagittis. Fusce imperdiet congue volutpat. Aenean nec accumsan eros. Mauris pharetra purus nisl, a egestas lectus mattis non. Vivamus commodo maximus libero eu volutpat. Duis pellentesque, felis eu accumsan varius, augue est bibendum augue, id volutpat urna ante imperdiet orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sollicitudin convallis. Integer eu sem in turpis imperdiet tempor. Phasellus tristique magna ut velit accumsan sodales. Vivamus id ante at ligula consequat molestie at eu mi. Sed porttitor posuere ante eu aliquet. Duis venenatis consectetur urna, sit amet vulputate est maximus sed. Nam tortor odio, tincidunt sit amet lorem in, consectetur mollis orci. Suspendisse potenti. Aenean tempus consectetur sem, sed venenatis eros congue non. Donec eget urna venenatis, viverra sapien in, bibendum eros. </p> <p> Etiam sed dui placerat, pharetra mi vitae, laoreet metus. Ut vulputate elit eu eleifend elementum. Duis condimentum, urna ut faucibus rhoncus, nunc nisi sollicitudin est, iaculis finibus ex lorem rutrum arcu. Donec congue purus nulla, eu sodales metus semper scelerisque. Aenean et libero sit amet metus mollis faucibus id eget lectus. Fusce sed enim scelerisque, maximus elit semper, tincidunt neque. Donec ut nulla porta, congue odio id, mollis quam. Donec ligula libero, ultricies quis posuere vel, suscipit tempor ligula. Nunc nulla ipsum, pulvinar quis dictum id, pulvinar vitae tortor. Vivamus a efficitur ante. Sed euismod accumsan neque, sit amet tempus justo ultricies volutpat. Donec sed ligula imperdiet, sollicitudin elit vitae, semper velit. Suspendisse at varius tortor. Mauris rutrum pretium lacus, a viverra elit laoreet eget. Suspendisse aliquam elementum mi. </p> </div> </div> </div> <script> var container1 = document.getElementById('container1'); var container2 = document.getElementById('container2'); function syncScroll() { var scrollPercentage = container1.scrollTop / (container1.scrollHeight - container1.clientHeight); container2.scrollTop = scrollPercentage * (container2.scrollHeight - container2.clientHeight); } container1.addEventListener('scroll', function () { requestAnimationFrame(syncScroll); }); container2.addEventListener('scroll', function () { requestAnimationFrame(syncScroll); }); </script> </body> </html></code></pre> </div> </div> <p></p> <p>我重写了代码。</p> </answer> </body></html>