I have read this SO Post: css overflow-x visible and overflow-y hidden causes scroll bar.
Also I have gone through: http://www.brunildo.org/test/Overflowxy2.html
I want to achieve something as follows:
When I tried using following code:
overflow-x: hidden;
overflow-y: visible;
It shows something like following result:
I dont want the scroll bar to appear.
Does Jquery has any solution for it?
You can do this with CSS like this:
HTML:
<div class="wrapper">
<div class="inner">
</div>
</div>
CSS:
.wrapper{
width: 400px;
height: 300px;
}
.inner{
max-width: 100%;
overflow-x: hidden;
}
Now your .wrapper div will have overflow: visible; but your .inner div will never overflow because it has a maximum width of 100% of the wrapper div. Note that your wrapper must have an explicitly defined width.
Here is a working jsFiddle
position: fixed sidebar div and added overflow-y: scroll; to the .wrapper and I could scroll up and down in the fixed div AND have overflow-x because tooltips were spilling out the side a bit.
line-height threshold (which can be dictated by design).CSS:
.class-div {
overflow-x: clip;
overflow-y: visible;
}
The thing with clip is, it restricts all scrolling, even programmatic ones.
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I am not sure if you need something like this with jQuery:
$('.horiz').width($('.container').width());
where .horiz is the horizontal bar and set the width of it to the width of the .container which holds the elements.
With CSS:
HTML Markup
<div class='container'>
<div class='horiz'></div>
<div class='vert'></div>
</div>
CSS:
.container {
width:320px;
height:320px;
border:solid 5px green;
overflow-x: hidden;
}
.horiz{
width:500px;
height:30px;
background:red;
}
.vert{
width:30px;
height:500px;
background:yellow;
position:absolute;
left:0;
top:30px;
}
and output of it:
Check the Output
