是否可以使用flexbox显示模型设置元素的滚动位置
Is it possible to set the scroll position of an element using flexbox display model?
我正在使用Angular Material来构建一个web应用程序,它使用Flexbox显示模型。<身体>处于(0,0),因为应用程序是"整页",但我想在工具栏中添加一个按钮,滚动到主要内容的顶部<div>。不确定这是可能的,因为我不认为Flexbox API向JavaScript展示了这样做的能力
尝试的解决方案:
window.scrollTo(0,0);
document.getElementById('elementId').scrollIntoView();
我的HTML看起来如下:
<div id="main" layout="column" flex>
<md-toolbar></md-toolbar>
<md-content></md-toolbar>
</div>
我尝试以<div>
为目标,并使用JavaScript滚动到顶部,如下所示:
document.getElementById('main').scrollTop = 0;
但这不会起作用,因为<div id="main">
的scrollTop
值等于0,因为它是一个完整的网页应用程序。
我将id
属性移动到<md-content>
元素:
<div layout="column" flex>
<md-toolbar></md-toolbar>
<md-content id="main"></md-toolbar>
</div>
在我的控制器中,我注入了"$window"服务,以在"document"对象上获得一个钩子,从而更恰当地在元素上获得钩子:
angular
.module('app')
.controller('Controller', Controller);
Controller.$inject = ['$window', ...];
function Controller($window, ...) {
var vm = this;
vm.scrollToTop = scrollToTop;
...
function scrollToTop(elementId) {
$window.document.getElementById(elementId).scrollTop = 0;
}
...
}
相关文章:
- 指示禁用元素滚动行为并改为滚动页面
- 在某个点停止固定元素滚动
- jQuery 航点在元素滚动到视图中时添加类
- 到达(窗口)上的中间元素.滚动
- 当元素滚动出屏幕时更改元素位置
- jQuery-将元素滚动到屏幕中间,而不是使用锚链接滚动到顶部
- 我想为一个元素添加一个事件监听器,当相应的元素滚动到视图中时,该监听器就会被激发
- 将元素滚动到页面底部的视图中
- fadeIn元素滚动
- 当光标到达底部时,有没有办法防止contentEditable元素滚动
- 固定元素滚动到Div
- 如何平滑地防止固定元素滚动经过指定元素
- 将所有HTML元素滚动到视图中
- 如果浏览器窗口高度为X,并且元素滚动到其中的X点,则合并条件
- 使用isroll4将最后一个元素滚动到第一个元素的开始位置
- 如何显示单独的锂元素滚动基于窗口的高度
- 根据所单击的元素滚动到页面上的相同位置
- 元素滚动的同时滚动另一个
- 修改jQuery.ScrollTo插件将元素滚动到页面中心(垂直/水平)或尽可能靠近中心
- 我如何检测一个元素滚动到视窗