scroll 相关问题

这是在 Android 平板电脑上运行的本地页面。该平板电脑将不会连接到任何网络，因此所有内容都需要保留在设备存储中。 HTML 代码：这是在 Android 平板电脑上运行的本地页面。该平板电脑将不会连接到任何网络，因此所有内容都需要保留在设备存储中。 HTML代码： <div class="container"> <div class="half" id="ListaCanzoni"> <p class="song-name" id="1">Titolo 1</p> <p class="song-name" id="2">Titolo 2</p> <p class="song-name" id="3">Titolo 3</p> <p class="song-name" id="4">Titolo 4</p> <p class="song-name" id="5">Titolo 5</p> <p class="song-name" id="6">Titolo 6</p> <p class="song-name" id="7">Titolo 7</p> <p class="song-name" id="8">Titolo 8</p> <p class="song-name" id="9">Titolo 9</p> <p class="song-name" id="10">Titolo 10</p> <p class="song-name" id="11">Titolo 11</p> <p class="song-name" id="12">Titolo 12</p> <p class="song-name" id="13">Titolo 13</p> <p class="song-name" id="14">Titolo 14</p> <p class="song-name" id="15">Titolo 15</p> <p class="song-name" id="16">Titolo 16</p> <p class="song-name" id="17">Titolo 17</p> <p class="song-name" id="18">Titolo 18</p> <p class="song-name" id="19">Titolo 19</p> </div> <div class="rendering-target half" id="song"></div> </div> CSS代码： body { overflow: hidden; background-color: #002; } * { margin: 0; padding: 0; } .container { display: flex; overflow: hidden; } .half { flex-grow: 1; flex-shrink: 1; flex-basis: 0; display: flex; flex-direction: column; } .song-name { font-weight: bold; font-size: 2em; line-height: 2em; padding-top: 5px; padding-bottom: 5px; letter-spacing: -0.5px; padding: 0px 36px 0px 16px; border-radius: 6px; margin-bottom: 5px; background-color: #fff; color: rgba(0, 0, 0, 0.6); border: 2px solid rgba(0, 0, 0, 0.2); user-select: none; } #ListaCanzoni { background-color: #024; overflow-y: scroll; scrollbar-width: none; } #ListaCanzoni::-webkit-scrollbar { display: none; } .title { display: block; text-align: center; font-weight: bold; font-size: 3em; color: #0FF; background-color: #042; } javascript代码： const songDiv = document.getElementById('song'); const item = document.querySelectorAll(".song-name"); item.forEach(function (el) { el.onclick = function () { songDiv.innerHTML = '<div class="title">' + this.id + '</div>'; console.log (this.id); console.log (songDiv.innerHTML); } }); 该页面也在 this JSFiddle . 左半部分包含可点击按钮（div）的列表，我想隐藏任何滚动条，但让用户能够通过触摸屏上通常的“拖动”操作来滚动它。我怎样才能在不产生点击的情况下允许此操作？我想要一种不需要任何额外 js 库/插件的解决方案，但如果不可能，至少需要一个尽可能少的解决方案。您无需尝试操作 #ListaCanzoni 上的滚动条，因为它没有滚动条。而且因为您在 overflow: hidden; 上设置了 body，所以您根本无法滚动。相反，您可以尝试以下操作： :root::-webkit-scrollbar { display: none; } :root { scrollbar-width: none; } body { background-color: #002; } ::-webkit-scrollbar 用于基于 WebKit 的浏览器，例如 Chrome 或 Edge，scrollbar-width: none; 用于基于 Gecko 的浏览器，例如 Firefox。

javascript html css scroll touch

回答 1 投票 0

缓慢滚动到 html 页面中的特定 div 或锚点

我有一个html页面，我想让它缓慢滚动到页面的特定点或整个页面。我尝试了以下代码但没有任何效果：我有一个 html 页面，我想让它缓慢滚动到页面的特定点或整个页面。我尝试了以下代码，但没有任何效果： <a href="#anchorName"></a> <script> function scrollTo(hash) { location.hash = "#anchorName"; } </script> 其次，我尝试滚动到 div，但在这种情况下我还必须使用 CSS 并设置高度。我正在努力避免这种情况。如 stackoverflow 过去的问题所示： <a href="#myDiv" id="button">button</a> <script> $("#button").click(function() { $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); </script> 而且它根本不起作用。尝试这样： $(document).ready(function(){ $("#button").click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 2000); }); }); #myDiv { margin-top: 800px; height: 50px; width: 300px; background: red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#myDiv" id="button">button</a> <div id="myDiv"></div> 由于您将 #myDiv 设置为按钮的 href，因此您必须在触发动画之前 preventDefault()： $("#button").click(function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="myDiv" id="button">button</a> <div style="height:400px;"></div> <div id="myDiv">Lorem Ipsum</div> 如果您使用的是 css 文件，可以插入以下规则缓慢滚动... html { scroll-behavior: smooth; } 您可以按照使用 jQuery 的示例代码平滑滚动到某个组件 id，例如： <a class="move_to_div" href="#anchorName"> move div </a> <div id="anchorName"> </div> <script> $(".move_to_div").click(function() { $('html, body').animate({ scrollTop: $("#anchorName").offset().top }, 1000); }); </script> 这只是示例，当单击“a href 链接”时，向下滚动将会平滑（要测试结果，请使用 css 在链接和 div 之间添加一些空格）我希望这对你有帮助。

javascript html scroll anchor autoscroll

回答 4 投票 0

Pyautogui 滚动功能不显示任何移动

这段代码这么简单，当它不起作用时，我真的感到无能为力。我试图找出还有什么可能导致代码无法工作。我想做的就是打开浏览器/谷歌，搜索一个...

scroll pyautogui

回答 3 投票 0

在桌面 Firefox 上添加橡皮筋弹跳滚动

有关过度滚动的问题通常会询问如何在移动网页上禁用它。我想做相反的事情：在桌面上浏览时在所有网页上创建橡皮筋效果。我正在使用 ei...

javascript css firefox scroll

回答 1 投票 0

WinUI 3. 使用 MVVM 以编程方式滚动列表视图

我正在尝试使用两个按钮（每个方向一个）和 MvvM 模式以编程方式滚动列表视图的内容。到目前为止，我能找到的所有其他解决方案都使用了 x:Name 和...