scroll 相关问题

滚动是指内容在显示屏上的连续滑动。

固定侧边栏内的狮身人面像雪花石膏主题滚动

我制作了一个sphinx项目/文档（使用雪花石膏主题），其左侧有一个固定的侧边栏（包含目录），但屏幕上显示的内容太多。我怎样才能...

html css scroll python-sphinx

回答 2 投票 0

如何在 HTML/CSS 中创建具有悬停叠加效果的水平滚动元素？

我正在开发一个网页，我需要创建一个具有以下属性的元素：可水平滚动：该元素包含多个舞蹈卡，每个代表一种舞蹈。应该

javascript html css scroll hover

回答 1 投票 0

在反应中，即使在添加任何div之前，我的html正文尺寸也大于屏幕尺寸并导致不必要的滚动

我正在考虑创建一个聊天 UI 作为练习课，因为我是 React 的初学者。我正在考虑创建一个聊天 UI 作为练习课，因为我是 React 的初学者。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css"> <meta name="viewport" content="width=device-width, initial-scale= 1.0" /> <title>Nothing</title> </head> <body> Hello <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> import './index.css'; import Hud from './hud.jsx'; import Top_bar from './top_bar.jsx'; import Chat from './chat.jsx'; function App() { return ( <div id="main_body"> <div id="main"> <div id="hud"><Hud /></div> <div id="top_bar"><Top_bar /></div> <div id="chat"><Chat /></div> </div> </div> ) } export default App; html body{ width: 95vw; height: 100vh; padding: 0px; margin: 0px; background-color: red; } /* #root{ padding: 0px; margin: 0px; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } */ /* #main_body{ width: 40%; height: 95%; background-color: yellow; } */ 不幸的是，刚开始时我就开始面临一个问题，即 HTML 的正文尺寸大于屏幕尺寸，即使没有滚动条也会导致滚动。请帮我解决这个问题，我可以向您保证组件 hud/top_bar 和 chat 没有任何 css 文件，因此它们不会导致异常。谢谢！将 body 高度设置为 100vh，宽度设置为 100vw 应该可以解决该问题。既然这不起作用，也许以下几点就是原因：如果您有更多未发布的 CSS，请确保没有其他样式扰乱尺寸（例如，错误地将元素的高度设置为 200%）。要设置身体样式，您无需选择 html > body。只要body就够了。但我真的不认为这会弄乱样式，因为 body 实际上是 html 的子元素。在 React 中，通常有两个 CSS 文件：index.css 和 App.css。 index.css 用于 index.html 文件，这意味着：它用于设置应始终保持不变的元素的样式，例如正文。 App.css 用于特定组件的样式化。在 App.js 上，您始终导入 App.css，而不是 index.css。您也不需要在index.html 中链接index.css 文件（如果我没有记错的话，是index.js 文件负责的）。尝试修复这些问题，看看是否会改变任何东西。这是我唯一可以建议的事情。我不太有信心他们实际上会成为解决方案，但也许他们会以某种方式指导你。祝你好运:) PS：我最后的建议100%来自个人经验。我总是通过 CRA 使用 React。我不知道当您使用其他构建工具时是否有不同的文件设置。如果是这种情况，请放弃该主题。

javascript html css reactjs scroll

回答 1 投票 0

Jetpack Compose：打开键盘时滚动到屏幕底部

键盘打开后，我想将布局（不是 LazyColumn）滚动到最底部。键盘打开检测工作正常： varparentSize by 记住{ 可变状态（大小...

android scroll android-jetpack-compose

回答 2 投票 0

css 滚动/水平滚动不起作用

分区元素区域无法滚动。我尝试使用宽度为 150px 的分区，并且 div 内部包含内联块元素。如下将链接列表显示为分割元素区域无法滚动我尝试使用宽度为 150px 的划分，并且在 div 内部使用内联块元素。如下 <p>Display a list of links as a horizontal menu:</p> <div>123 <span><a href="/html/default.html" target="_blank">HTML</a></span> <span><a href="/css/default.html" target="_blank">CSS</a></span> <span><a href="/js/default.html" target="_blank">JavaScript</a></span> </div> span{ display: inline-block; } div { display: block; width: 150px; border: 2px solid green; overflow-x:s croll !important; } 我需要的是能够滚动div并且内部内联块出现在一行中。这就是你想要的吗？ div { display: flex; gap: 3em; padding: 1em; width: 70px; border: 2px solid green; overflow-x: scroll !important; } <p>Display a list of links as a horizontal menu:</p> <div> <span><a href="/html/default.html" target="_blank">HTML</a></span> <span><a href="/css/default.html" target="_blank">CSS</a></span> <span><a href="/js/default.html" target="_blank">JavaScript</a></span> </div>

css scroll

回答 1 投票 0

如何防止react在重新渲染时自动滚动页面？

我在 React 中遇到了一个奇怪而烦人的问题 - React 在重新渲染时自动滚动页面。 CodeSandbox 上的演示应用程序 - https://codesandbox.io/s/react-scroll-bug-demo-y7u50j?file=/src/App.js

reactjs scroll

回答 3 投票 0

CSS 最大高度和溢出自动始终显示垂直滚动

我有一个使用以下 CSS 样式设置的 div 类： div.multiple_choice{ 边框：1px 纯黑；最大宽度：300px；最大高度：200px；溢出：自动； } 问题是，当...

scroll overflow css

回答 12 投票 0

UIScrollView 一次仅向一个方向滚动

我有一个 UIScrollView，我希望它能够在两个方向上滚动（目前是这样），但一次只能滚动一个。因此，例如，如果您开始水平滚动它，它不会垂直移动......

iphone ios ipad uiscrollview scroll

回答 4 投票 0

让 onWheel 事件在移动设备上运行

我有一个（React）组件，其中包含许多从数组映射的文本。容器的高度较小，我使用Javascript来实现滚动。这是代码：班级我有一个（React）组件，其中包含许多从数组映射的文本。容器的高度较小，我使用Javascript来实现滚动。这是代码： <div> class MyComponent extends Component { constructor() { this.state = { visibleTop: 0 }; } scrollHandler(ev) { ev.preventDefault(); const { deltaY } = ev; const { visibleTop } = this.state; const { clientHeight: height } = this.visibleBox; if ( visibleTop >= 10 && deltaY < 0 ) { return; } if ( visibleTop <= (300 - height) && deltaY > 0 ) { return; } this.setState(prevState => ({ visibleTop: prevState.visibleTop - deltaY })); } render() { const { state: { visibleTop }, scrollHandler } = this; return ( <div className='content-box' onWheel={scrollHandler}> <div className='visible-box' style={{ top: visibleTop }} ref={el => this.visibleBox = el}> { logs.map((log, index) => ( <div className='log-line' key={`${log}-${index}`}>{log}</div> )) } </div> </div> ); } } div 是一个很高的 .visible-box，有点被 div 剪掉了。我想你明白我的逻辑了。现在，这在桌面上完美运行，但不适用于移动设备。根据我的研究，我发现 .content-box 事件不会在移动设备上触发。我还阅读了有关 mousewheel 事件的信息，但它只给出了触摸的 (x,y) 坐标，而不是像 touchmove 那样的 deltaY。我如何在移动设备上实现此功能？我遇到了一个同样的问题，我使用 mousewheel 来处理滚动，并使用 DeltaY 来处理用户向上或向下滚动。此活动不适用于手机。因此，您可以使用 onWheel 并将一些 clientY 值存储在数组中来检查用户是否向上或向下滚动。 onTouchMove

javascript reactjs events scroll touch

回答 1 投票 0

滚动时 div 高度变化

有没有办法实现滚动改变div大小的效果？我想要这样的效果：https://angular-f6srve.stackblitz.io 我正在使用 Angular HostListener 来捕获滚动事件...

angular scroll

回答 1 投票 0

Column/SingleChildScrollView 不滚动

我正在学习 flutter 来制作一个应用程序。在这里，我试图制作一个页面来显示完整的帖子。问题是页面不是作为一个单元滚动。 SinglePostPage 类扩展了 StatefulWidget...

flutter scroll flutter-layout rendering

回答 5 投票 0

在 Jupyterlab 中绘制没有水平滚动条的图形

如果绘图比屏幕宽，我看不到右侧部分，因为不存在水平滚动条。我有这样的事情：我到处找，但好像没有...