Basically, I need the overflow to behave like "auto", but hiding the scrollbar.
If I use "hidden" I cannot select the text beyond the limit.
try using something like this applied to the DIV that you want to control with scrolling.
#foo {
height: 100px;
overflow-y; scroll;
overflow-x: hidden;
}
If you really want to hide the scrollbar, then replace it with JS or CSS for a blank image?
Related
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
On my site, http://www.granthpark.me/outside If I resize my browser to smaller sizes, my content will be hidden and I can't scroll to it. Can anyone point out what's making the content fixed?
Here is the CSS, can't post it here because it's too long http://www.granthpark.me/assets/css/main.css
EDIT: New problem. I can scroll now because I tried replacing every instance of position:fixed with absolute in addition to changing overflow:hidden to scroll. But now I don't know how to fix the margin of my background to resize properly when I resize the browser.
Simple replace the style sheet, you will get rid of all the problems. click to see
add property in body tag this in css:
body{overflow: scroll;}
Change your body's property to overflow: scroll;
Right now your overflow property is set to hidden.
body {
background: #fff;
overflow: hidden;
}
Here's the culprit:
body {
background: #fff;
overflow: hidden;
}
add this property in body tag:
overflow-x:hidden;
In css file "main.css" line no. 934 add this property in id #bg
Position:Fixed
Is there any known reason overflow-y: hidden will remove all scroll bars in IE9?
I've put this in an IE9 only style sheet like this:
body,html {
overflow-x: auto !important;
overflow-y: hidden !important;
}
I'm a genius and had my x and y switched. For future developers that see this. Get sleep, it really helps.
The overflow: hidden property will hide any content that will flow out of the normal boundary of the elements box model. In this case you are setting it to the html, so anything that overflows will hide instead of having the scroll bars. Give this a try and see how this works:
html, body {
overflow-x: auto;
overflow-y: scroll;
}
Here is a great article on all the different overflow properties available and how they work: http://css-tricks.com/the-css-overflow-property/
I have an arbitrary amount of text that will be displayed in a confined space.
How can I trim the output so that whatever is "beyond" the box is not displayed, or how can I force the box to create a vertical scroll bar?
For HTML:
<div id="smallBoxWithLotsOfText">There is way more text in here than what
I have typed. I mean, this text is long. There is lots of it.
You can't even imagine how long this text is gonna get. No joking.
It's long; it's very, very long. It keeps going, and going, and going.
It's the Energizer Bunny of text. Like, seriously dude. It's crazy.
Absolutely crazy.
</div>
Try CSS:
#smallBoxWithLotsOfText {
width: 100%;
height: 100px;
overflow: auto;
}
The height property tells the box how high to be. The overflow property tells the box to add a scroll bar when the contents get bigger, but not to always have a scrollbar (like scroll does).
You can see this in action.
usually 'overflow: auto' should work if there is a set height/width. You can force a scroll bar with 'overflow: scroll'. You can hide anything with 'overflow: hidden;'
The key to overflow with CSS styles is the height and width have to be determined by the browser in order for it to know when to start overflowing.
The overflow property. You can set the value to hidden to hide the data and scroll to scroll the data.
<div class="text">this is some text that would be very long...</div>
//Hidden
.text
{
overflow: hidden;
width: 50px;
height: 50px
}
//Scroll
.text
{
overflow: scroll;
width: 50px;
height: 50px
}
Take a look at overflow. overflow: hidden clips content, overflow:Scroll adds a scrollbar.
How can I trim the output so that
whatever is "beyond" the box is not
displayed
Use overflow: hidden
How can I force the box to create a
vertical scroll bar?
Use overflow: auto. To use this, though, make sure you have a width/height specified on the box
You may try using ellipsis by adding the following in CSS:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
More ways to trim text and show ellipsis can be found here:
http://blog.sanuker.com/?p=631
I'm a css noob, and though I want this DIV to resize when the window is resized, I don't want inner content to change the size of it.
Use the overflow statement. e.g.
overflow: hidden; /* all content hidden as it spills over */
overflow: auto; /* Scroll bars appear on div when required to allow moving around */
overflow: scroll; /* Scroll bars will be present at all times */
Try using:
div {
overflow: hidden;
}
Read more here.
set overflow: hidden on the containing div
Have you looked into CSS and the overflow directive? You can use this to tell the div to scroll or truncate/hide its content when the content is too large.