CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zobo
Zobo

Reputation: 293

How to scroll window without overflow

I need to scroll in a window but my window height is too small to scroll. Is it possible to scroll when the height of container is too small to see the scrollbar. Here is my code to scroll:

setTimeout(function(){
  $(window).scrollTop($(window).scrollTop()+1);
  $(window).scrollTop($(window).scrollTop()-1);
}, 800);

I need to scroll window or body even if height of it is less than 100px.

Upvotes: 4

Views: 179

Answers (4)

Andriy
Andriy

Reputation: 1037

To see scrollbar, just use CSS property overflow:scroll; on your container.

Upvotes: 0

Hamlett
Hamlett

Reputation: 400

You need first hide the scroll bar to do not take space (because you don't have too much space in the element), you can make that with the next css:

#elementId{ 
   overflow: hidden;
}

Then you need to bind the mousewheel event over the 'small' element and trigger a function to manually scroll your element, you can do that with the next jQuery code:

$('#elementId').bind('DOMMouseScroll mousewheel', function(e) {
    $('#elementId').scrollTop($('#elementId').scrollTop()+1);
});

This example is simplified just to bind the mousewheel event in general, to know if it is up or down you can use the jQuery Mouse Wheel Plugin that you can get here.

Upvotes: 0

lpinto.eu
lpinto.eu

Reputation: 2127

If you define a fixed height in your element, then you can use overflow:scroll to enable scroll.

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32941

I believe you want to set a min-height of 110% on html in your CSS. I would do:

html {
  min-height: 110%;
}

Here's a demo: http://jsbin.com/sebago/1/edit?html,css,output

Upvotes: 3

Related Questions