Scroll to top when overflow is hidden

Question

Is there a way to scroll the content of an element that has an overflow of hidden to the top?

Example use case:

Container element has a max height of 200px, starting position is at 60px.
User clicks "show more", the height expands to 200px.
Since there is more content than 200px allows, the user can scroll to the bottom of the list.
When the user clicks "show less", the height lowers to 60px.
Problem arises, in that the list is no longer at the top and not scrollable.

Any ideas here would be great.

score 3 · Accepted Answer · edited May 23 '17 at 10:31

3

I believe it is not possible with CSS.

You can try to look at element.scrollIntoView.

Searching for scrollIntoView I found this question on SO where the answer suggests using jQuery's scrollTop.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 01 '13 at 14:58

tacensi

81
3

You are correct. I needed to use JavaScript, and since we're using jQuery we just using scrollTop to solve the problem. Thanks! – alvincrespo Aug 02 '13 at 15:56

score 2 · Answer 2 · answered Aug 01 '13 at 16:04

Do you mean something like that?

http://jsfiddle.net/8pvjf/

It has to do with jquery indeed

$(document).ready(function(){

        $('.background').css('font-size',($(window).width()*0.1));

        $(".blow").each(function(){

        });



       $('.blow').on('click', function(event){
var element = $(this);
if(element.attr('data-blow') == 'true'){
    element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
    $(this).addClass('blow')
    $(this).removeClass('overflow')
} else {
    element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
        $('body').animate({ scrollTop: element.offset().top });
    }).attr('data-blow', 'true').addClass('overflow').removeClass('blow');


}

});

        $(window).resize(function(){
$('.background').css('font-size',($(window).width()*0.1));

});

Have fun toying with those codes as much as you want. Of course, this is based on some previous work of mine and you'll need to change your classes and styles accordingly to your needs. :)

Scroll to top when overflow is hidden

2 Answers2