Javascript scrollTop无效

问题描述 投票:2回答:3

我正在尝试使用javascript来滚动这样的div ...

	$(document).ready(function() {
  var list = document.getElementsByClassName('list');
	list.scrollTop = 110;
  });
.list{height:100px;background:wheat;color:white;overflow:hidden;
	overflow-y: scroll;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.

Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.

Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.

Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.

In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. 
</div>

它不动,我做错了什么?

javascript jquery scrolltop
3个回答
3
投票

函数getElementsByClassName返回元素列表而不是特定元素,并且不能在元素列表中使用scrollTop。此方法属于DOM Element对象。

您可以做的是获取您找到的第一个元素并在此元素上运行它:

var list = document.getElementsByClassName('list');
list[0].scrollTop = 110;

你们可以查看你找到的所有元素并设置每个元素的scrollTop

Array.prototype.forEach.call(list, function(el) {
    el.scrollTop = 110;
});

以下是第一个选项对您的代码段的修复:

$(document).ready(function() {
  var list = document.getElementsByClassName('list');
	list[0].scrollTop = 110;
});
.list{height:100px;background:wheat;color:white;overflow:hidden;
  overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.

Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.

Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.

Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.

In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. 
</div>

1
投票

正如Dekel指出的那样,getElementsByClassName返回一个数组,而不是一个元素。但是,由于你已经在使用jQuery,我建议你改为使用它而不是设置滚动:

$(document).ready(function() {
  $('.list').scrollTop(110); // use jQuery instead of vanilla JS
});
.list{height:100px;background:wheat;color:white;overflow:hidden;
	overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.

Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.

Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.

Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.

In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. 
</div>

0
投票

您也可以使用div.scrollTop = div.scrollHeight它将适合您。

var divEl = document.querySelector('div.list'),
    scrollHeight = divEl.scrollHeight;
   
  divEl.scrollTop=scrollHeight;
.list{
    height:100px;
    background:#ccc;
    color:#5c5c5c;
    overflow:hidden;
    overflow-y: scroll;
   }
<div class="list">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla.

Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus.

Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero.

Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo.

In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. 
</div>
© www.soinside.com 2019 - 2024. All rights reserved.