滚动是指内容在显示屏上的连续滑动。
我喜欢 eBay Playbook 网站 https://playbook.ebay.com/ 中显示的滚动动画，即“受人们如何发现的启发”标题下的第一张照片的动画。 有谁知道有什么方法可以...
就像在这个网站中一样，当滚动条向下时，导航栏向上并最终得到修复。有人有我如何做到这一点的例子吗？我将在 Angular 项目中执行此操作。 https://www.woolma...
我的页面上有一些div设置为溢出：滚动，如下所示： 如何检测当前正在滚动的元素或者滚动是否应用于主体？ Event.target 只返回 elem...
MUI DesktopDatePicker 导致滚动到 iFrame 中的顶部
我正在尝试在 iFrame 中使用 MUI 中的 DesktopDatePicker。 打开（单击按钮）时，页面父页面滚动到顶部。 使用效果（（）=> { if (datePicker.current) { 常量
我的这部分代码有问题。我已经包含了 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>
自定义 Tk Scrollable Frame 在窗口未满时滚动
我一直在尝试使用此处的许多答案和分散的指南使用 Tkinter / ttk 创建一个可滚动框架。框架用于保存一个可以添加和删除行的表。一个
我在 RecyclerView 中遇到问题。当我在 RV 中移动项目然后滚动时，看到一些项目重复了。
我正在顶部开发一个反应网站，我有导航栏，左侧有徽标，中间有导航链接，每当用户单击我想要的这个按钮时，右侧就有“需要家庭辅导员”按钮...
我需要在自动完成列表框中给出自定义滚动样式。 我尝试并研究了它，但没有一个起作用。 我最后的代码 我需要在自动完成列表框中给出自定义滚动样式。 我尝试并研究了它，但没有一个起作用。 我最后的代码 <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 } } }}
Overflow-y auto 使overflow-x 剪辑不可见
我正在尝试为卡片创建一个滚动容器，其中滚动仅在卡片内容中执行，而不是在页眉或页脚中执行。我想容器应该隐藏水平溢出...
如何使用animation-timeline属性添加延迟或平滑滚动驱动的动画？
我目前正在使用CSS滚动驱动的动画和新的animation-timeline属性。我所指的技术示例可以在这里查看：图像显示示例。 然而，我面临着一个
我正在做我的研究生项目。 我正在制作一个简单的视图 ios 应用程序，它使用 ARFaceAnchor 检测您的观察点并使用此信息滚动网页。 顺便说一句，网页显示为
Angular Jest 测试指令与 @HostLinener('window:scroll')
问题：我想测试一个指令，该指令应该在“window:scroll”事件之后更改元素的样式，但不知道如何触发该事件 指令： @指示（{ 选择器：'[
我讨厌发布以前提出的问题，但我认为以前针对此问题的解决方案不再受支持。我使用下面的结构来启用滚动。垂直滚动在...
这一切都发生在移动屏幕上。我有这个导航栏： 这一切都发生在移动屏幕上。我有这个导航栏： <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'); }); 我希望这对将来的人有帮助。 干杯！！！
我很有趣，是否可以使用滚动驱动动画 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 max-height 转换完成后会立即出现内部 HTML 内容？
使用 HTML 和 JavaScript 我试图创建一个列表，在单击按钮时转换到视图，包括可滚动的内部容器，在父 DIV 上使用最大高度转换。
这是一个简单的代码。问题是在 iOS 18 中，文本编辑器中的滚动不起作用（但在以前的操作系统中它可以正常工作）。对于此问题的任何帮助（解决方法），我将不胜感激。 ZSt...
Javascript/Jquery 滚动事件移动屏幕高度触发两次
创建一个自动滚动事件到窗口大小的下一张幻灯片/页面。但每次滚动时，该事件都会触发两次。我猜是因为检测到自动滚动事件作为触发器......