scroll 相关问题

我熟悉链接到网页上的部分的经典方法，其中锚标记指向页面中的某些元素ID，就像这个示例一样我熟悉链接到网页上的部分的经典方法，其中锚标记指向页面中的某些元素 id，如本示例 <div class="main" id="section1"> <h2>Section 1</h2> <p>Click on the link to jump to section 2.</p> <a href="#section2">Click Me</a> </div> <div class="main" id="section2"> <h2>Section 2</h2> <p>Click on the link to jump to section 1.</p> <a href="#section1">Click Me</a> </div> 但是当我在 Framework7 应用程序中尝试这个技巧时，它不起作用。我想这与 Framework7 处理链接和视图的方式有关，但我不知道如何修复它。请有经验或建议的人帮助我。一天后我找到了一个适用于堆栈溢出的答案（请参阅下面的链接），但是我不想费心回答我自己的问题，但我决定现在就这样做。解决方案在于使用每个 DOM 元素上可用的 JavaScript rollIntoView 方法以编程方式将所需的元素/部分滚动到视图中。在 Framework7 应用程序中，可滚动容器是具有 .page-content 类的元素，而不是 html 或 body 标签。这是经典方法的缺点的原因，它预先假定可滚动容器是 body 标签，与 JavaScript的scrollIntoView方法不同，它寻找该部分最接近的可滚动祖先。 document.querySelector(". section").scrollIntoView(); 解决方案源自Armando Pérez Marqués 的回答

html scroll hyperlink html-framework-7

回答 1 投票 0

如何使用tailwindcss使react中的标题仅在滚动时有阴影？

我有一个反应标题，我希望当滚动条位置初始（0）时没有阴影，并且在滚动时有阴影。这是使用

reactjs scroll header tailwind-css navbar

回答 1 投票 0

如何在 YoutubePlayerScaffold 内的 Flutter ListView.separated 中启用滚动

我有一个 Flutter 应用程序，其中包含一个包含 ListView.separated 的 YoutubePlayerScaffold。我想在 ListView.separated 中启用滚动，同时避免退出全屏模式时出现 renderflex 错误...

flutter listview scroll screen-orientation flutter-renderflex-error

回答 1 投票 0

在 Android 移动应用程序中滚动 Banno Digital Toolkit

我在仅在 Android 设备上使用 Banno Plugin iFrame 时遇到了一个非常令人困惑的问题。我无法在 iFrame 内滚动。你有关于如何做到这一点的示例代码或指导吗...

android css mobile scroll banno-digital-toolkit

回答 2 投票 0

如何使背景出现在具有自己背景颜色的子元素上

我有一个带子项的可滚动容器元素： Adipisci，totam。错误，命令。我有一个带子项的可滚动容器元素： <ul class="scroll-shadows"> <li>Adipisci, totam.</li> <li>Error, dicta.</li> <li class="disabled-item">Disabled input</li> <li>Eveniet, dolorem!</li> ... </ul> 可滚动容器有顶部阴影（背景）： background: linear-gradient( gray, white ) center top; 子项已禁用并具有背景颜色： .disabled-item { background-color: #F6F6F7; } 问题是禁用元素的背景颜色出现在背景阴影上方。有没有办法将阴影优先于背景颜色，以便阴影出现在顶部？我尝试过的：尝试使用背景混合模式，但没有效果。尝试使用z-indexes，但没有效果。您可以在这里看到问题： // just so demo loads scrolled down a little. document.querySelector(".scroll-shadows").scrollTop = 30; .disabled-item { background-color: #F6F6F7; } .scroll-shadows { width: 600px; max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; background: /* Shadow TOP */ linear-gradient( gray, white ) center top; background-repeat: no-repeat; background-size: 100% 60px; background-attachment: scroll; } /* Not important to the functionality, just for this particular demo */ .scroll-shadows { list-style: none; padding-left: 1rem; padding-right: 1rem; } .scroll-shadows > * { padding: 0.2rem; } * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; font: 500 100% system-ui, sans-serif; } .scroll-shadows { --scrollbarBG: transparent; --thumbBG: #90a4ae; scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } .scroll-shadows::-webkit-scrollbar { width: 8px; } .scroll-shadows::-webkit-scrollbar-track { background: var(--scrollbarBG); } .scroll-shadows::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius: 6px; border: 3px solid var(--scrollbarBG); } <div> <ul class="scroll-shadows"> <li>Adipisci, totam.</li> <li>Error, dicta.</li> <li class="disabled-item">Disabled input</li> <li>Eveniet, dolorem!</li> <li>Id, tempora!</li> <li>Voluptate, consectetur?</li> <li>Voluptatibus, omnis.</li> <li>Eius, fugit.</li> <li>Quia, non!</li> <li>At, laudantium?</li> <li>Commodi, maiores!</li> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Sit</li> <li>Amet</li> </ul> </div> CodePen：https://codepen.io/Radek-Skrabal/pen/oNJzMEQ 您可以尝试向 .disabled-item 元素添加具有“darken”值的混合混合模式；它看起来像这样： .disabled-item { background-color: #F6F6F7; mix-blend-mode: darken; }

css scroll background background-color shadow

回答 1 投票 0

UITableView 重新加载完成后是否可以得到回调？

我正在我的表格视图中重新加载一些单元格。重新加载完成后，我想滚动以便它们可见。我知道scrollToRowAtIndexPath:atScrollPosition:方法。但我需要...

iphone ios uitableview animation scroll

回答 2 投票 0

使用 MapBox 和 Scrollama 创建“粘性”地图

我正在尝试使用 MapBox 和 Scrollama 创建一个“粘性”地图。具体来说，我希望能够按照以下顺序向下滚动：简介：叙述性内容动态 MapBox 地图

scroll mapbox-gl-js sticky

回答 1 投票 0

为什么mui分页改变页面会导致滚动到底部？

我在我的react/next项目中使用mui分页。我希望分页在更改时导致屏幕滚动到顶部。问题是当我将页面从 1 更改为 2 时，屏幕滚动到底部...

reactjs next.js material-ui scroll pagination

回答 1 投票 0

一种在背景颜色上设置渐变的 CSS 方法

你能帮我解决以下挑战吗？有针对这个的解决方法吗？他们有一个带有子项的可滚动容器：阿迪皮斯西，... 你能帮我解决以下挑战吗？这个问题有解决办法吗？他们有一个带孩子的可滚动容器： <ul class="scroll-shadows"> <li>Adipisci, totam.</li> <li>Error, dicta.</li> <li class="disabled-item">Disabled input</li> <li>Eveniet, dolorem!</li> ... </ul> 可滚动容器有顶部阴影（背景）： background: linear-gradient( gray, white ) center top; 子项已禁用（背景颜色）： .disabled-item { background-color: #F6F6F7; } 有没有办法让阴影优先于背景颜色？我为这种情况创建了一个CodePen： https://codepen.io/Radek-Skrabal/pen/oNJzMEQ 尝试使用背景混合模式，但没有效果。尝试使用z-indexes，但没有效果。您可以尝试向 .disabled-item 元素添加具有“darken”值的混合混合模式；它看起来像这样： .disabled-item { background-color: #F6F6F7; mix-blend-mode: darken; }

css scroll background background-color shadow

回答 1 投票 0

切换页面时如何正确计算React的滚动位置？

我有一个读取滚动位置并保存到状态（Redux）的函数。有一个问题，在包含文章的页面上，由于某种原因切换到某篇文章后，该功能会捕获

reactjs redux scroll

回答 1 投票 0

flutter web - 水平singlechildscrollview无法通过鼠标点击和拖动进行滚动

我想通过单击并拖动来滚动行中的项目。当我尝试通过单击并拖动滚动时，它没有任何反应....................................... ................................................

flutter scroll flutter-web horizontal-scrolling horizontallistview

回答 4 投票 0

vuetify 和 v-virtual-scroll：如何以编程方式将项目滚动到视图中？

我知道我的项目高度是多少，并且我知道该项目在列表中的位置，所以我应该能够计算滚动位置。但是，我不知道如何设置滚动位置。