滚动是指内容在显示屏上的连续滑动。
在可滚动元素上,如何将 CSS 属性应用于滚动前隐藏的子元素部分?
图1 图2 我的网站上有这个元素,它应该在较小的屏幕上水平滚动(overflow-x:滚动),问题是,我应用于其子元素的属性仅出现在...
我正在制作一个反应应用程序,单击选择框下方的项目时,下一部分中的相应项目会滚动。 上述场景的工作示例:https://codesandbox.io/s/scr...
默认情况下,Divi 会将页面平滑滚动到锚链接的各个部分。我需要页面立即“跳转”到该部分,而无需任何滚动动画。 示例:https://stanford...
使用固定标题时,必需的文本区域字段未正确滚动到。 CSS 属性滚动边距/填充不起作用
我的网站上有一个固定标题和一个表单。有一些输入字段和一些文本区域字段是必需的。当提交表单而未填写这些字段时,我希望用户...
我正在开发一个项目,其中页面顶部有一个绝对容器,可滚动容器内有多个粘性标题。然而,粘性标头并没有堆叠在......之上
我无法配置 lenis-nuxt,有没有办法在我的项目上实现它?我尝试在 app.vue 文件和布局上使用它,如下所示: ... 我无法配置 lenis-nuxt,有没有办法在我的项目上实现它?我尝试在 app.vue 文件和布局上使用它,如下所示: <div class="side-bar-layout"> <div class="page-content-slot"> <ClientOnly> <Lenis> <slot /> </Lenis> </ClientOnly> </div> </div> 这是 lenis-nuxt 包装器的链接 针对 @StudioFreights/Lenis 的 Nuxt 改编
我有一个相当复杂的布局,主要显示一张带有文本的图片(重叠)和底部的一些按钮。我动态设置文本,在某些情况下它超过了 TextBox 高度,...
我使用带有固定列的 jquery 数据表。一切正常,但我在滚动 x 时遇到问题。 正如你所看到的,我无法从固定列中删除滚动 x。有什么想法可以解决这个问题吗?
以下 HTML 显示了一个可滚动、可调整大小的 div,其中有一个按钮和一个其他内容 div。 。容器 { 宽...</desc> <question vote="0"> <p>以下 HTML 显示了一个可滚动、可调整大小的 div,其中有一个按钮和一个其他内容 div。</p> <pre><code><!DOCTYPE html> <html> <head> <style> .container { width: 100%; max-width: 100%; height: 150px; position: relative; overflow: auto; resize: both; white-space: nowrap; background: lightgray; } .container .fixed { position: absolute; right: 5px; top: 5px; } </style> </head> <body> <div class="container"> <button class="fixed">Test</button> <div class="content"> texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext </div> </div> </body> </html> </code></pre> <p>按钮应该固定在div的右上角。这对于调整大小来说效果很好,但是,当我滚动时,按钮也会移动。我该如何解决这个问题?</p> </question> <answer tick="false" vote="0"> <p>在 <pre><code>.container</code></pre> 选择器中,您有 <pre><code>overflow: auto;</code></pre>。将 <pre><code>overflow: auto;</code></pre> 移至仅针对 <pre><code>.content</code></pre> 类的选择器:</p> <pre><code>.container { width: 100%; max-width: 100%; height: 150px; position: relative; resize: both; white-space: nowrap; background: lightgray; } .container .fixed { position: absolute; right: 5px; top: 5px; } .content { overflow: auto; } </code></pre> </answer> </body></html>
当页面滚动经过另一个 div (s1) 时,我试图切换 div 上的类。 每当页面滚动到指定的div(s1)时,该类不会添加到浏览中的模糊div中...
我正在从事 Instagram autosub 项目。这是一个动态网站,所以我需要向下滚动。我知道如何在主窗口中执行此操作,但由于兴趣是一个弹出窗口,因此此解决方案
我的视差页面顶部有一些链接,我希望它们在您单击它们时以动画方式滚动到页面中所需的位置。 目前链接只是跳转到我页面上的位置,没有
我遇到了此按钮的显示问题,即使没有滚动,该按钮也会在加载页面时出现。 其次,我无法改变内部箭头的形状以获得更标准的...
在我的网站上,我已将 粘在顶部,但当我向下滚动时它只粘了几秒/像素,然后它就滚走了,请参阅下面的代码片段并滚动... 在我的网站上,我已将 <nav> 粘在顶部,但当我向下滚动时它只粘了几秒/像素,然后它就滚走了,请参阅下面的代码片段并向下滚动。我希望向下滚动时 nav 始终粘在顶部,除非 <header> 可见。 HTML <!DOCTYPE html> <html> <head> <title>Danis Website</title> <link href="reset.css" type="text/css" rel="stylesheet"> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div id="wrapper"> <header> <h1>Danis Website</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="rezepte.html">Rezepte</a></li> <li><a href="zutaten.html">Zutaten</a></li> </ul> </nav> <main> Main Main Main<!-- In the code snippet below here are more lines of Text, here if have omitted the lines for better readability. </main> <footer> Footer </footer> </div> </body> </html> CSS *{ margin: 0; padding: 0; } body, html{ height: 100%; width: 90%; margin: 0 auto; background-color: #aaa; } #wrapper{ display: flex; flex-direction: column; height: 100%; background-color: fuchsia; } header{ flex: 0 0 50px; background-color: #888; text-align: center; position: sticky; top: 100px; } nav{ flex: 0 0 50px; background-color: dodgerblue; } nav ul { display: flex; list-style-type: none; background-color: dodgerblue; height: 100%; } nav ul li { flex: 1; text-align: center; padding: 10px; border-left: 2px solid #aaa; } nav ul li:first-child { border-left: 0; } nav ul li a{ color: white; text-decoration: none; } nav ul li:hover { background-color: #888; } main{ flex: 1; background-color: #ddd; } footer{ flex: 0 0 50px; background-color: #888; } #list{ display: flex; flex-wrap: wrap; } #list-item{ flex: 0 1 300px; display: flex; border: 1px solid dodgerblue; margin: 10px; padding: 10px; } #list-item-img{ flex: 0 0 auto; margin-right: 5px; } #list-item-text{ flex: 1; margin-left: 5px; } #list-item-text p { margin: 5px; } *{ margin: 0; padding: 0; } body, html{ height: 100%; width: 90%; margin: 0 auto; background-color: #aaa; } #wrapper{ display: flex; flex-direction: column; height: 100%; background-color: fuchsia; } header{ flex: 0 0 50px; background-color: #888; text-align: center; } nav{ flex: 0 0 50px; background-color: dodgerblue; position: sticky; top: 0px; } nav ul { display: flex; list-style-type: none; background-color: dodgerblue; height: 100%; } nav ul li { flex: 1; text-align: center; padding: 10px; border-left: 2px solid #aaa; } nav ul li:first-child { border-left: 0; } nav ul li a{ color: white; text-decoration: none; } nav ul li:hover { background-color: #888; } main{ flex: 1; background-color: #ddd; } footer{ flex: 0 0 50px; background-color: #888; } #list{ display: flex; flex-wrap: wrap; } #list-item{ flex: 0 1 300px; display: flex; border: 1px solid dodgerblue; margin: 10px; padding: 10px; } #list-item-img{ flex: 0 0 auto; margin-right: 5px; } #list-item-text{ flex: 1; margin-left: 5px; } #list-item-text p { margin: 5px; } <div id="wrapper"> <header> <h1>Danis Website</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="rezepte.html">Rezepte</a></li> <li><a href="zutaten.html">Zutaten</a></li> </ul> </nav> <main> Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main </main> <footer> Footer </footer> </div> 编辑:我在 Arch Linux 上使用 Firefx 37.0.2 我相信这可能是因为你的height: 100%上有body。当您的内容太长时,body不会环绕整个内容,而只是继承浏览器视口高度。因此,当您滚动经过 body 的底部时,nav 就会停止粘住。 顺便说一句,虽然我认为你还不应该使用position: sticky。它的支持率不到浏览器的 20%。 http://caniuse.com/#feat=css-sticky 解决方案: 将 #wrapper 中的 height: 100%; 替换为 min-height: 100%;。刚刚删除 height: 100%; 时,页面小于内容未填充视口的页面上的视口 我这里也有同样的棘手问题。 正如DigitalDouble所说,是内容高度问题, 但不仅仅是身体造成的 我在我的 JavaScript 代码中找到了它...... 改变 $(contentElement).style.高度 = "99px"; 到 $(contentElement).style.minHeight = "99px"; 我希望它有帮助。 =) 只需显示我在哪里遇到此问题(运行代码片段以查看为什么会发生) html, body { /*it takes 100vh always */ height: 100%; border: 1px solid red; } .section { /*there was a problem, because it also set to 100vh */ height: 100%; /*remove it or change to fit-context*/ } .header { top: 0; position: sticky; background: green; } .main > div { height: 200vh; } <html> <body> <section class="section"> <header class="header">Header</header> <main class="main"> <div>Hello</div> </main> </section> </body> </html>
我正在使用强制滚动捕捉,当该部分不大于页面时,这会起作用。当该部分需要大于页面时,它不起作用。 我基本上需要使用滚动捕捉
是否可以默认禁用所有 NextJS <Link> 上的滚动?
我正在使用 NextJS 构建一个网站并使用淡入淡出页面过渡。我在出入转换之间手动将页面滚动到顶部,这样用户就永远不会看到跳转。 但要做到...
使用 Python 在 Slack 聊天中使用 Selenium 滚动页面
我的脚本正在从 Slack 聊天中抓取数据,但我没有 API,因此我使用 Selenium 进行网页抓取,当我刷新页面时,我需要滚动到消息页面的底部。 我法力...
滚动到菜单选项卡项目上的选项卡内容,单击 WooCommerce 单一产品
当在 WooCommerce 单一产品中单击菜单选项卡项时,我使用 PHP 函数中嵌入的 jQuery 代码滚动到选项卡内容。产品选项卡的布局位于彼此下方。那个...
我使用以下一段Jquery组合成一个php函数来执行以下操作; woocommerce 产品选项卡的布局位于彼此下方。代码将用户滚动到产品选项卡-