Make DIV Scrollbar follow li element of the list

Asked

Viewed 141 times

3

Hello, I would like to know how I can make the code I have (below) make that every time the button "next" or "previous" are clicked, follow the element li with class "music-playing"?

Code: http://codepen.io/anon/pen/vnprg

I want to make the scroll bar focus the LI element with the class. Keep following the element every time the class is changed. Gives current shape, scrolling is out of sync, going up and down.

javascript jquery

  • I don’t quite understand what you want. I visualized it here and it seemed to work right.

  • @Joaopaulo: He is not following correctly the li with the class I added. .

  • @From what I understand your problem is with the scrolling that apparently gets messed up. That’s right?

  • @Exact Edgarmunizberlinck!

  • I suggest you update your question to better describe the points where the staff was in doubt... I myself, after reading everything, still do not understand what effect you want.

  • @Ruipimentel is more understandable now?

  • It’s more understandable :) but there’s still one thing I don’t understand. I tried to run the Codepen you sent in Chrome (Ubuntu system) and nothing happened; in fact, my console accuses fatal error already loading.

  • @Ruipimentel updated the Codepen, try now!

Show 3 more comments

1 answer

2


You need in this case to subtract the position of the #playlist using scrollTop: $(proximo).offset().top - $('#playlist').offset().top.

I also leave a suggestion to compress the code:

$("#playlist-content input[type=button]").click(function(){  
  var playing = $('#playlist li.music-playing');
  $('#playlist li').removeClass('music-playing');
  var proximo = this.id == 'next' ? playing.next() : playing.prev();
  if (!proximo.length) proximo = playing;
                proximo.addClass('music-playing');  
  $('#music').animate({
    scrollTop: $(proximo).offset().top - $('#playlist').offset().top
 }, 500);

});

http://codepen.io/sergiocrisostomo/pen/yFleu

  • 1

    Thanks for the help :p

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.