正如标题所暗示的那样,当用户点击一个按钮时,我试图将div的内容滚动20像素,但它到目前为止仅适用于firefox。 这是html:
<html>
<head>
<title>Testing Scroll By on Chrome</title>
<meta charset="utf-8">
<style>
div{
width:500px;
height: 500px;
overflow: scroll;
}
</style>
</head>
<body >
<button onclick="goDown()">Go Down </button>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ultricies velit. Etiam ut elit viverra, iaculis purus at, sollicitudin quam. Maecenas eget mollis metus. Duis et facilisis eros, ac gravida mi. Duis turpis urna, faucibus quis risus ac, ornare euismod justo. Fusce venenatis lorem in orci sagittis aliquam. Etiam fermentum metus faucibus velit rutrum rutrum.
Aenean tincidunt auctor tincidunt. Integer in vulputate dui, eget maximus mauris. Cras at libero vehicula, volutpat lectus ac, pulvinar enim. In porttitor leo vel laoreet facilisis. Mauris ultrices justo non lectus maximus, ut blandit augue malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget turpis pulvinar, iaculis nisl vitae, mattis dui. Vestibulum facilisis posuere libero at venenatis. Vestibulum posuere tempor est, ut pretium ligula sollicitudin viverra. Sed id tellus nibh. Curabitur varius velit nibh, id placerat nunc venenatis eget.
Vivamus gravida consectetur urna id blandit. Integer mauris felis, dignissim ut risus eget, consequat convallis odio. Donec vitae tristique est, et sollicitudin urna. Nam justo est, bibendum consequat luctus quis, scelerisque eget enim. Morbi lorem ligula, tincidunt ut molestie at, scelerisque et turpis. Sed lacinia dictum pellentesque. Fusce vestibulum, leo ac auctor iaculis, ante magna faucibus nulla, at elementum sem lectus quis tortor. Suspendisse eu dignissim lacus, vel elementum felis. Praesent non molestie ex, et ornare massa.
Nullam diam lacus, ultrices sed eleifend laoreet, placerat a dolor. Quisque non enim id erat tincidunt fringilla. Integer neque lacus, aliquet id iaculis sed, efficitur ac velit. Etiam felis felis, cursus a massa ac, tincidunt convallis leo. Cras tempor ante laoreet dignissim bibendum. Nullam non auctor turpis. Etiam in est posuere, gravida nulla nec, maximus purus. Fusce non rutrum quam. Pellentesque in orci facilisis, posuere lorem sed, pharetra sem. Quisque malesuada, dui in hendrerit posuere, sem est iaculis justo, sit amet iaculis lectus neque sit amet velit. Etiam vulputate ut diam at aliquet. Nunc ultricies velit non elit vehicula malesuada id a odio.
Vestibulum vitae gravida lectus. Phasellus bibendum pharetra maximus. Maecenas et velit quis augue tincidunt vehicula. Proin pharetra magna in lectus feugiat, sed hendrerit neque suscipit. Sed pretium aliquam nunc, eu commodo nunc. Mauris quis dui diam. In fringilla leo ut arcu pellentesque elementum sed in metus. Nam maximus diam felis, nec lacinia elit rhoncus sit amet. In maximus, leo eget consequat finibus, augue purus dictum dolor, a sollicitudin risus mauris eu ante. Etiam dapibus interdum ligula ac gravida. Morbi non turpis posuere, volutpat dui sit amet, malesuada tortor. Morbi mollis, ipsum eu vulputate porttitor, enim lacus elementum leo, sed ornare lacus felis ut sapien. Sed lobortis ipsum et dui facilisis, nec consequat nibh gravida. Sed tristique libero eu efficitur pharetra. Donec suscipit consequat nibh a bibendum. Fusce efficitur mi a nibh vestibulum scelerisque.
In mi velit, facilisis sed tortor vitae, dapibus scelerisque lectus. Quisque laoreet mollis mattis. Proin id mauris euismod dolor suscipit bibendum. Suspendisse ut convallis nisl. Nunc suscipit non ex lobortis rutrum. Suspendisse ornare nibh eu sapien rhoncus molestie. Vestibulum ornare massa feugiat, convallis metus eu, sagittis lorem. Sed nec metus faucibus, iaculis nisi at, pulvinar odio. Ut dignissim ex a elementum hendrerit. Nullam lobortis ultrices quam, id feugiat odio iaculis eu. In in ex elementum, rhoncus sapien sit amet, consectetur est. Aliquam dignissim velit tortor, et porttitor arcu suscipit at. Morbi in dui vel libero feugiat venenatis.
</div>
</body>
</html>
这是javascript:
<script>
function goDown(){
document.getElementsByTagName("div")[0].scrollBy(0,20);
}
</script>
有没有解决方案可以在Chrome和IE中使用?
答案 0 :(得分:1)
我认为最好的解决方案是使用scrollLeft / scrollTop
属性。
我可以说,而不是elem.scrollBy(0,10)
- &gt;
elem.scrollTop = elem.scrollTop + 10;
或者你可以刺伤Element.prototype
:
Element.prototype.scrollBy = function(x,y) {
this.scrollLeft = this.scrollLeft + x;
this.scrollTop = this.scrollTop + y;
};
答案 1 :(得分:0)
截至2019年,MSIE和Edge仍不支持Element.scrollBy
。出于这一原因,我构建了element-scroll-polyfill,这是一个最小的npm软件包,它添加了符合W3C规范的scrollBy
,{{ 1}}和scrollTo
方法用于scroll
个实例。
或者,您可以使用smoothscroll-polyfill,它提供了更多功能,但大小约为原来的两倍。