scroll 相关问题

我的这部分代码有问题。我已经包含了 css 和 html。 .文章容器{ 显示：柔性； justify-content：空间之间； ...</desc> <question vote="0"> <p>我的这部分代码有问题。我已经包含了 css 和 html。</p> <pre><code><style> .article-container { display: flex; justify-content: space-between; align-items: flex-start; overflow: auto; } .article, .article1 { width: 560px; height: 800px; left: 55%; z-index: 10000; position: relative; opacity: 37%; background-color: #161D6F; display: inline-block; vertical-align: top; overflow: auto; margin: 0; padding: 0; } .article { left: 55%; } .article1 a { color: white; overflow: auto; } .article1 { left: -30%; width: 300px; height: 900; overflow: auto; } .article1::before, .article::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; filter: blur(10px); z-index: -1; opacity: 15%; overflow: auto; pointer-events: hidden; } .article, .article1 { position: relative; z-index: 1; } </style> ` <body> <h1>Welcome to my Website!</h1> <div class=article id="dynamicContent"> </div> <div class=article1> <ul> <li><a href="#" onclick="loadContent('---.html')">N</a></li> <li><a href="#" onclick="loadContent('--.html')">M</a></li> <li><a href="#" onclick="loadContent('---.html')">S</a></li> <li><a href="#" onclick="loadContent('--.html')">F</a></li> <li><a href="#" onclick="loadContent('--.html')">F</a></li> <li><a href="#" onclick="loadContent('--.html')">S </a></li> <li><a href="#" onclick="loadContent('---.html')">C</a></li> <li><a href="#" onclick="loadContent('--.html')">N </a></li> <li><a href="#" onclick="loadContent('--.html')">M </a></li> </ul> </div> </body> </code></pre> <p>当我在 Article 上向下滚动时，文本溢出到 div 上，而 div 没有完全覆盖文本。我想知道问题可能是什么？我是 css 的初学者，所以如果这是一个愚蠢的错误，我深表歉意。</p> </question> <answer tick="false" vote="0"> <h2>修复 CSS 错误</h2> <p>检查完你的CSS后，我建议你修复下一个错误</p> <ol> <li>正确设置 .article1 的高度（以像素为单位）（如 <pre><code>height: 900px;</code></pre> 而不是 <pre><code>height: 900</code></pre>），因为缺少 px 可能会导致高度渲染不正确。</li> <li>调整 <pre><code>::before</code></pre> 伪元素以避免重叠。您可以将 <pre><code>overflow: hidden;</code></pre> 添加到 <pre><code>::before</code></pre> 伪元素以防止它们在视觉上溢出。</li> </ol> <pre><code> .article1 { left: -30%; width: 300px; height: 900px; /* Fixed the height unit */ } .article1 a { color: white; } .article1::before, .article::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; filter: blur(10px); z-index: -1; opacity: 0.15; overflow: hidden; /* Prevents overflow from pseudo-element */ } </code></pre> <p>这就是我能建议的全部。如果此修复没有给出任何结果，最好查看所有代码。</p> </answer> </body></html>

html css scroll

回答 0 投票 0

自定义 Tk Scrollable Frame 在窗口未满时滚动

我一直在尝试使用此处的许多答案和分散的指南使用 Tkinter / ttk 创建一个可滚动框架。框架用于保存一个可以添加和删除行的表。一个

python user-interface tkinter scroll

回答 1 投票 0

Android Recycler滚动时查看重复项目

我在 RecyclerView 中遇到问题。当我在 RV 中移动项目然后滚动时，看到一些项目重复了。

android scroll android-recyclerview move

回答 5 投票 0

反应按钮滚动到特定div

我正在顶部开发一个反应网站，我有导航栏，左侧有徽标，中间有导航链接，每当用户单击我想要的这个按钮时，右侧就有“需要家庭辅导员”按钮...

reactjs scroll

回答 3 投票 0

我可以为自动完成列表框 Mui 提供自定义滚动条样式吗？

我需要在自动完成列表框中给出自定义滚动样式。我尝试并研究了它，但没有一个起作用。我最后的代码我需要在自动完成列表框中给出自定义滚动样式。我尝试并研究了它，但没有一个起作用。我最后的代码 <Autocomplete fullWidth popupIcon={<KeyboardArrowDownIcon />} id="combo-box-demo" options={allTableData} noOptionsText={"Məhsul tapılmadı"} getOptionLabel={(option) => option.name ?? option} ListboxProps={{ style: { maxHeight: "200px", "&::-webkit-scrollbar": { width: "20px", }, }, }} 是的，您可以将自定义 className 传递给 ListboxProps 组件的 Autocomplete，如下所示： ListboxProps={{ className: "myCustomList" }} 然后将滚动条相关的CSS添加到此类中，如下所示： .myCustomList::-webkit-scrollbar { width: 12px; background-color: #5f6f9c; } .myCustomList::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #d62929; } 您可以查看此沙箱，了解此解决方案的实时工作示例。而不是在 style 属性中添加样式；在 ListBoxProps 中添加 'sx' 属性中的样式。这对我有用。 ListboxProps={{ sx: { maxHeight: 300, // Adjust this value as per your requirement '&::-webkit-scrollbar': { width: '8px' }, '&::-webkit-scrollbar-track': { backgroundColor: theme.palette.background.default }, '&::-webkit-scrollbar-thumb': { backgroundColor: theme.palette.primary.main, borderRadius: '10px', border: `2px solid ${theme.palette.background.paper}` }, '&::-webkit-scrollbar-thumb:hover': { backgroundColor: theme.palette.primary.dark } } }}

css scroll material-ui

回答 2 投票 0

Overflow-y auto 使overflow-x 剪辑不可见

我正在尝试为卡片创建一个滚动容器，其中滚动仅在卡片内容中执行，而不是在页眉或页脚中执行。我想容器应该隐藏水平溢出...

css reactjs scroll overflow

回答 1 投票 0

如何使用animation-timeline属性添加延迟或平滑滚动驱动的动画？

我目前正在使用CSS滚动驱动的动画和新的animation-timeline属性。我所指的技术示例可以在这里查看：图像显示示例。然而，我面临着一个

css scroll css-animations smooth-scrolling

回答 1 投票 0

如何让iOS应用中的网页自动滚动？

我正在做我的研究生项目。我正在制作一个简单的视图 ios 应用程序，它使用 ARFaceAnchor 检测您的观察点并使用此信息滚动网页。顺便说一句，网页显示为

ios swift scroll wkwebview

回答 1 投票 0

Angular Jest 测试指令与 @HostLinener('window:scroll')

问题：我想测试一个指令，该指令应该在“window:scroll”事件之后更改元素的样式，但不知道如何触发该事件指令： @指示（{ 选择器：'[

angular testing scroll jestjs directive

回答 1 投票 0

如何在flutter web上启用水平滚动？

我讨厌发布以前提出的问题，但我认为以前针对此问题的解决方案不再受支持。我使用下面的结构来启用滚动。垂直滚动在...

flutter scroll flutter-web

回答 3 投票 0

Bootstrap Navbar 在折叠时移动窗口

这一切都发生在移动屏幕上。我有这个导航栏：这一切都发生在移动屏幕上。我有这个导航栏： <nav class="navbar navbar-dark sticky-top navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="#top"> <img src="images/id/logo.svg" height="30" class="d-inline-block align-top" alt=""> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#presentacion">Presentación</a> </li> <li class="nav-item"> <a class="nav-link" href="#proyectos">Proyectos</a> </li> <li class="nav-item"> <a class="nav-link" href="#festivales">Festivales</a> </li> <li class="nav-item"> <a class="nav-link" href="#formacion">Formación</a> </li> <li class="nav-item"> <a class="nav-link" href="#hoy">Hoy en Día</a> </li> <li class="nav-item"> <a class="nav-link" href="#forma_cto">Contacto</a> </li> <li class="nav-item"> <a class="nav-link" href="#ubi">Ubicación</a> </li> <li class="nav-item"> <a class="nav-link" href="videos.html">Videos</a> </li> </ul> </div> </div> </nav> 而且，为了在单击菜单时折叠菜单，我使用了这个 jquery： $('.nav-link, .navbar-brand').on('click', function() { $('.navbar-collapse').collapse('hide'); }); 问题是，这会将窗口向下移动多个像素（正是菜单可见时的高度，在本例中为 296 像素）。现在，我尝试添加一些滚动： $('.nav-link, .navbar-brand').on('click', function() { $(window).scrollTop($(window).scrollTop() - 296); $('.navbar-collapse').collapse('hide'); }); 而且，它会折叠，但不会向上滚动。即使我交换线路也不起作用（相同的行为，会折叠但不会向上滚动）： $('.nav-link, .navbar-brand').on('click', function() { $('.navbar-collapse').collapse('hide'); $(window).scrollTop($(window).scrollTop() - 296); }); 而且，奇怪的是，如果我只调用scrollTop api，则向上滚动就完成了： $('.nav-link, .navbar-brand').on('click', function() { $(window).scrollTop($(window).scrollTop() - 296); }); 如何使导航栏折叠并使窗口向上滚动 296 像素？预先感谢。解决方案是将导航栏与正文“分离”，为此，我给正文添加了一些填充（与导航栏的高度一样多），并向导航栏添加了 css 值“position:固定”（以及其他值）： body { padding-top: 56px; } .navbar { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } jquery 保持不变（如乞讨中所示）： $('.nav-link, .navbar-brand').on('click', function() { $('.navbar-collapse').collapse('hide'); }); 我希望这对将来的人有帮助。干杯！！！

html jquery scroll bootstrap-5 navbar

回答 1 投票 0

CSS 滚动时元素的透明效果

我很有趣，是否可以使用滚动驱动动画 API 将文本创建为顺利出现？我尝试了这段代码，但它对我不起作用。谁能解释一下什么是我很有趣，是否可以使用滚动驱动动画 API 将文本创建为 <footer> 顺利出现？我尝试了这段代码，但它对我不起作用。有人可以解释一下出了什么问题吗？ *JS 对解决方案不感兴趣 body { margin: 0; font-size: 18px; padding: 0 20px; } .main { min-height: 100vh; margin-bottom: 10px; } @keyframes opacity-in { from { opacity: 0; } } footer { color: #f00; } footer p { animation-name: opacity-in; animation-fill-mode: both; animation-timing-function: linear; view-timeline-name: --opacity-show; animation-timeline: --opacity-show; animation-range: 0% 100%; } <main class="main"> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolor voluptatum repellendus laboriosam reprehenderit deleniti, voluptas libero molestiae voluptatem provident perspiciatis consectetur ad placeat qui, nostrum officiis eos nisi autem. </div> <div> Laboriosam explicabo, dolorum necessitatibus libero totam veritatis quam facilis accusamus, blanditiis id deserunt laborum delectus, eligendi commodi dolorem modi nostrum ex architecto voluptatibus ducimus. Voluptatem atque maiores dolore architecto ratione. </div> <div> Sint at enim, dolorem magnam quia eaque sunt, nostrum commodi maiores explicabo obcaecati eum vitae consectetur labore ut non veritatis laborum earum modi autem reiciendis in ipsum? Incidunt, dignissimos, repellat! </div> <div> Iusto minus numquam incidunt, facilis tempora velit possimus! Error quisquam, fugit totam libero fugiat harum incidunt pariatur! Eligendi minima corrupti dicta debitis corporis dignissimos, ipsa distinctio officia voluptates saepe laudantium. </div> <div> Quisquam fugit repellendus placeat natus tempora, magnam molestias maiores provident voluptates quos praesentium facere non veniam nulla rem nam dolor est iste odio, aut numquam totam deleniti? Omnis, minima, nemo. </div> <div> Voluptates eligendi eos explicabo vel dicta consequatur, facere esse consectetur praesentium! Sunt consequuntur nisi aut quas magnam aspernatur, commodi voluptatem temporibus corporis, nobis rem nemo eos suscipit reprehenderit placeat repellat. </div> <div> Hic error beatae a repellat aut ducimus asperiores saepe ratione nobis possimus ad mollitia illum quasi explicabo dolor eveniet repellendus molestiae, totam laudantium nam commodi, sed nostrum nihil. Minima, nemo. </div> <div> Laborum veritatis distinctio iure illum consequuntur, perspiciatis, nisi facilis vel voluptas animi, magnam expedita corporis quis maxime unde. Tenetur, consectetur voluptates optio nam illo ex ab cupiditate voluptas inventore fugiat. </div> <div> Amet vitae soluta numquam necessitatibus, assumenda voluptates ut quas iste ex quidem! Accusantium tenetur dolorum, alias est. Nesciunt saepe quo soluta alias quidem molestias praesentium consectetur ea natus maxime. Impedit! </div> <div> Obcaecati, amet ipsa explicabo aspernatur fuga. Ipsum vitae nobis odio asperiores non sed, officiis repudiandae, eum adipisci explicabo minima repellendus cumque excepturi reprehenderit. Magni, ipsa est. Quasi tempora obcaecati assumenda! </div> </main> <footer> <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p> <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p> <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p> </footer> 您的animation-range需要是entry 0% entry 100%并且不需要命名视图，您可以依赖view() body { margin: 0; font-size: 18px; padding: 0 20px; } .main { min-height: 100vh; margin-bottom: 10px; } @keyframes opacity-in { from { opacity: 0; } } footer { color: #f00; } footer p { animation-name: opacity-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: view(); animation-range: entry 0% entry 100%; } <main class="main"> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolor voluptatum repellendus laboriosam reprehenderit deleniti, voluptas libero molestiae voluptatem provident perspiciatis consectetur ad placeat qui, nostrum officiis eos nisi autem. </div> <div> Laboriosam explicabo, dolorum necessitatibus libero totam veritatis quam facilis accusamus, blanditiis id deserunt laborum delectus, eligendi commodi dolorem modi nostrum ex architecto voluptatibus ducimus. Voluptatem atque maiores dolore architecto ratione. </div> <div> Sint at enim, dolorem magnam quia eaque sunt, nostrum commodi maiores explicabo obcaecati eum vitae consectetur labore ut non veritatis laborum earum modi autem reiciendis in ipsum? Incidunt, dignissimos, repellat! </div> <div> Iusto minus numquam incidunt, facilis tempora velit possimus! Error quisquam, fugit totam libero fugiat harum incidunt pariatur! Eligendi minima corrupti dicta debitis corporis dignissimos, ipsa distinctio officia voluptates saepe laudantium. </div> <div> Quisquam fugit repellendus placeat natus tempora, magnam molestias maiores provident voluptates quos praesentium facere non veniam nulla rem nam dolor est iste odio, aut numquam totam deleniti? Omnis, minima, nemo. </div> <div> Voluptates eligendi eos explicabo vel dicta consequatur, facere esse consectetur praesentium! Sunt consequuntur nisi aut quas magnam aspernatur, commodi voluptatem temporibus corporis, nobis rem nemo eos suscipit reprehenderit placeat repellat. </div> <div> Hic error beatae a repellat aut ducimus asperiores saepe ratione nobis possimus ad mollitia illum quasi explicabo dolor eveniet repellendus molestiae, totam laudantium nam commodi, sed nostrum nihil. Minima, nemo. </div> <div> Laborum veritatis distinctio iure illum consequuntur, perspiciatis, nisi facilis vel voluptas animi, magnam expedita corporis quis maxime unde. Tenetur, consectetur voluptates optio nam illo ex ab cupiditate voluptas inventore fugiat. </div> <div> Amet vitae soluta numquam necessitatibus, assumenda voluptates ut quas iste ex quidem! Accusantium tenetur dolorum, alias est. Nesciunt saepe quo soluta alias quidem molestias praesentium consectetur ea natus maxime. Impedit! </div> <div> Obcaecati, amet ipsa explicabo aspernatur fuga. Ipsum vitae nobis odio asperiores non sed, officiis repudiandae, eum adipisci explicabo minima repellendus cumque excepturi reprehenderit. Magni, ipsa est. Quasi tempora obcaecati assumenda! </div> </main> <footer> <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p> <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p> <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p> </footer>

css scroll

回答 1 投票 0

scroll 相关问题

最新问题