Nic*_*ick 36 javascript jquery dom
所以我绝望地试图让一些滚动功能在页面上工作.没有运气后我决定坚持window.scrollTo(0, 800);
我的页面,看看我是否可以进行任何滚动.什么都没发生.我有一个扩展的手风琴,然后我想滚动到其中的特定元素.但是现在我很乐意看到东西滚动.有人碰到这个吗?
谢谢!
fre*_*evd 68
如果您有这样的事情:
html, body { height: 100%; overflow:auto; }
Run Code Online (Sandbox Code Playgroud)
如果body和html都具有100%的高度定义并且还启用了滚动,则window.scrollTo(和所有派生的滚动机制)不起作用,尽管显示滚动条(可由用户使用),当内容超出时那100%的身高.这是因为您看到的滚动条不是窗口的滚动条,而是主体的滚动条.
解:
html { height: 100%; overflow:auto; }
body { height: 100%; }
Run Code Online (Sandbox Code Playgroud)
Nic*_*ick 21
我能够使用jQuery方法animate()解决这个问题.以下是我使用的实现示例:
$('#content').animate({ scrollTop: elementOffset }, 200);
Run Code Online (Sandbox Code Playgroud)
选择器获取ID ="content"的div.然后我使用scrollTop作为选项应用animate方法.第二个参数是动画持续时间的以毫秒为单位的时间.我希望这有助于其他人.
Vin*_*ven 18
我使用setTimout修复了这个问题.我正在使用angularjs但也许它可以帮助在香草js.
setTimeout(function () {
window.scrollTo(0, 300);
},2);
Run Code Online (Sandbox Code Playgroud)
agm*_*984 12
这昨天发生在我身上,因为我overflow: auto
在一个 div 上有一个孩子 to<html>
和<body>
。
所以我了解到window.scrollTo()
为了工作,你必须在元素上设置overflow: auto
(或其他overflow-y: scroll
)<html>
。
我了解到document.body.scrollTo()
为了工作,你必须已经overflow
开始<body>
。
我了解到您也可以使用document.querySelector('#some-container').scrollTo()
.
就我而言,我想
window.scrollTo()
工作,所以我将溢出 CSS 放在<html>
.
我很惊讶这里没有其他答案谈论“确切哪个”元素是可滚动的。根 html 元素必须可滚动window.scrollTo()
才能工作。我下游的所有子元素<html>
都设置为height: auto
.
我的 CSS 是这样的:
html { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }
body { width: 100%; height: auto; }
#app { width: 100%; height: auto; }
Run Code Online (Sandbox Code Playgroud)
Bik*_*net 11
有时它不仅仅是css问题,对我而言浏览器是罪魁祸首.我必须通过这段代码来解决它.
if ('scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual'
}
Run Code Online (Sandbox Code Playgroud)
它允许开发人员获取滚动更改的所有权.在这里阅读更多相关信息
对我来说,将 html 和 body 的高度设置为 auto 就可以了。
html, body { height: auto }
Run Code Online (Sandbox Code Playgroud)
小智 7
长话短说
document.querySelector('#dummy_element').scrollIntoView()
为我工作。
解释
我也遇到了以下问题
document.querySelector('#some-container').scrollTo()
window.scrollTo()
正如@agm1984在这里提到的:
然后我尝试使用:document.querySelector('#dummy_element').scrollIntoView()
这对我来说很有效。
这里以更好的方式解释差异。
快速区别:
Element.scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的视口中。
Window.scrollTo() 方法滚动到文档中的一组特定坐标。
小智 6
我有同样的问题。在 scrollTo 为我工作之前聚焦窗口。
window.focus();
window.scrollTo(0,800);
Run Code Online (Sandbox Code Playgroud)
这就是我在 React 上所做的,因为我有一个根元素,作为页面上的第一个也是最外层的 div,我滚动到该元素的顶部。
const root = document.getElementById('root');
root.scrollTo({
top: 0,
left: 0,
behavior: 'smooth',
});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
52789 次 |
最近记录: |