Adding Scrollbars in HTML - javascript

This is kind of a really nooby question, and I think I already know the answer, but:
Can you add Scrollbars to the side of a <div>?

CSS
div {
height: 100px;
overflow: auto;
}
jsFiddle.
You give an explicit height so the div doesn't expand to fit its content.
If you only want horizontal or vertical scrolling, use overflow-x and overflow-y respectively.
If down the track you want the extra content to be hidden, use overflow: hidden.
The default for overflow property is visible.

Css:
overflow:auto;
or force the scroll area even when content doesn't overflow by:
overflow-y:scroll;

This will add scroll bar in a div
<div style="overflow:auto; height:556px;width:564px;">
</div>

Related

Hide horizontal off-screen overflow of a div that has a large width

How do I hide the horizontal, off-screen overflow of a <div> that has a large width set on it? For example:
HTML:
<div class="example">
</div>
CSS:
.example {
height: 100px;
width: 10000px;
background-color: black;
position: absolute;
overflow: hidden;
}
Here is an example fiddle that shows the scrollbar appearing, I wish for that to not happen if the div is very large like this.
Edit: Adding hidden overflow-x on the parent element does not work on small width iOS devices.
You can set overflow: hidden on the elements container. In this case it's the body.
body {
overflow: hidden;
}
You're nearly there!
Setting the overflow of the .example class is only hiding any overflowing content inside of it, though.
You would need to set the overflow of the parent container of .example, for this to work - i.e. whatever container it is inside of.
As you mentioned in your OP, you want to hide horizontal scrollbars.
For this, you would need to set
overflow-x: hidden
But (as mentioned), be sure this is on the parent container of .example.
This could be the body, or another div etc. HTH.
e.g.:
body, .parent-container {
overflow-x: hidden;
}
You can use overflow-x: hidden in CSS to hidde only horizontal scroll.

Dynamically setting height of a div

I have a div called list which is getting its content from database.
I have set the vertical scroller such that whenever its height exceeds 100px,it will use scroll bar.
Now my problem is when the content of the list gets empty or less than 100px,it is setting to same height of 100px .I want the height of div dynamically as per the content of it and at the same time use vertical scroll bar whenever its height crosses 100px.
#list {
height: 100px;
width: 1100px;
overflow-x: hidden;
overflow-y: auto;
}
Any help will be highly apreciated
Use max-height:100px instead of height:100px.
You can see the difference here: jsFiddle example. Chop the text down to see the div shrink.
height:auto;
max-height:100px;

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Is it possible to change default overflow:hidden border?

When I use overflow:hidden on a container div with an image slider inside, it hides the overflowing content perfectly, but creates a white border of about 50px wide on the right side.
I want the images to extend all the way to the edge of the page, or as close as possible.
Is it possible to make the 'border' that overflow:hidden creates transparent, or make it narrower?
Hmm.. Animuson is right. Overflow: hidden; doesn't add any border. If the images is a link, then it might have borders (but the default color isn't white).
But yeah, please add some source code for it. Without knowing the complete scenario, then something like this could possibly help you out:
HTML:
<div id="section1">
<img alt="foobar" src="the_URL" />
</div>
CSS:
#section1 {overflow: hidden; width: 100px; display: block; }
#section1 img {width: 100px; border: none; outline: none; display: block;}
not tested...
Let me know if it helps or not. If it doens't, then please elaborate.
It turns out that the way to fix this problem was to:
Set the outer container to width:100%,
Set the inner container to 60px more than total page width, and overflow:hidden
This reduced the 'border' (right margin whitespace) to any px width I set, as per the width of the inner container.
Code: http://www.benphilippi.com

How to make the div become a container with scroll bar?

This is the simple code:
<div id="container">
<div id = "information">
</div>
</div>
When I change the "information" to width 1000, and container width 100, the "information" become very long, but I would like to let the information div inside the div...I means, I want the container have a scroll bar, if the information's width is longer than the container. How can I do so? Thank you.
#container {
overflow: auto;
}
This should do the trick:
#container
{
overflow: auto;
}
Set overflow: auto in the stylesheet.
That said, it is almost always better to make use of the available space and not introduce small regions with their own scrollbars (which are harder to deal with with AT, and require scrolling more frequently to read)
Or use overflow-x and overflow-y to limit the scrolling to just vertical or horizontal.
#container { overflow-x: auto; } /* Horizontal scrolling only */
or
#container { overflow-y: auto; } /* Vertical scrolling only */

Categories

Resources