我希望能够在按下按钮时滚动到目标.我在想这样的事情.
<button (click)="scroll(#target)">Button</button>
在我的component.ts中有一个类似的方法.
scroll(element) {
window.scrollTo(element.yPosition)
}
我知道上面的代码无效,只是为了表明我的想法.我刚刚开始学习Angular 4而没有以前的Angular经验.我一直在寻找类似的东西,但所有的例子都在AngularJs中,与Angular 4不同
在一个反应应用程序中,我有一个方法被调用以将特定节点带入视图,如下所示.
scrollToQuestionNode(id) {
const element = document.getElementById(id);
element.scrollIntoView(false);
}
滚动很好,但滚动动作有点不稳定.我怎样才能让它顺利？我没有看到任何我可以为scrollIntoView提供的选项.
if (document.querySelector(target)) {
event.preventDefault();
document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
}
scrollIntoView即使event.preventDefault用于避免默认锚标记行为，上述行为也无法正常工作。功能在 IE 和 firefox 中有效，但在 chrome 版本中无效>=81
var dropdownElement = document.getElementById('dropdown');
dropdownElement.addEventListener('change', function(ev) {
var containerChoosed = document.getElementById('container_' + this.value);
containerChoosed.scrollIntoView({
block: "center",
behaviour: "smooth"
});
});div {
border: 1px solid;
height: 400px;
margin: 16px;
}
#container_1 {
background-color: yellow;
}
#container_2 {
background-color: blue;
}
#container_3 {
background-color: green;
}
#container_4 {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="dropdown">
<option value="1">Div …我在这里有一个测试用例:
http://www.libsys.und.edu/dev/scroll-test.html
它有一个包含很长链接列表的DIV.我想将DIV滚动到给定的链接.在我的测试用例中,通过按下JSTOR按钮完成,将按钮推进到JSTOR链接.在实际生产样本中,将基于键盘输入选择链接.因此,例如,按"B"将其推进到第一个"B"链接,即生物学文摘.
我的测试用例中的预期结果是:我单击JSTOR,它滚动,因此JSTOR位于DIV的顶部.这可能涉及向下或向上滚动,具体取决于DIV已经滚动了多远.
实际结果取决于DIV是否已经滚动.
如果DIV根本没有滚动,那么它在所有浏览器中都能正常工作.
如果DIV已经滚动(甚至一点点),结果如下:
此外,在某些我无法令人满意地识别的情况下,Chrome和Safari都会向下滚动并将JSTOR链接垂直居中放置在DIV 的中间.
Opera是唯一能够始终如一地实现我期望的浏览器.Firefox和IE以不同的方式做到这一点,但至少以不同的方式做到这一点,并且他们的行为相互匹配; 我不知道Chrome和Safari的行为是什么.
那么 - 是否有某种方式可以滚动DIV,使得目标链接总是在浏览器中相对于其父级位于相同的位置？我甚至不关心它是否在顶部,真的,尽管这对我来说最有意义.只要我能以一致的方式让它以同样的方式工作,我会很高兴.
对于长期记录,这是我的CSS和JS; HTML只是一个很长的DIV内部链接列表,ID为"box".我试图制作一个JS Fiddle,但它死在我身上 - 我认为它不喜欢HTML源代码的长度.
CSS:
#box {
width: 300px;
height: 200px;
overflow: auto;
position: relative;
}
#box ul {
margin: 0;
padding: 0;
list-style: none;
}
JS:
// I'm running scrollTop() and position().top through Math.floor() because
// Firefox likes …我有一个div，如果它变长，它将显示一个滚动条。它是CSS
top: 35px;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
bottom: 0px;
overflow-x: hidden;
display: block;
不知何故，当我使用jQuery（v1.7.1）滚动此div时，它不适用于iPad（iOS 8.3）Safari，但在所有桌面浏览器上均能完美运行。这是代码
$('#myDivId').animate({ scrollTop: 100 });
这个普通的JS代码在iPad Safari上都不起作用，但是在桌面浏览器上可以正常工作
var myDiv = document.getElementById('myDivId');
myDiv.scrollTop = 100;
有人对为什么有任何想法吗？