I have created a div and set its initial position
<div class="guide" >
<style>
.guide{
height:150px;
width:200px;
position:absolute;
right:-170px;
top: 10%;
}
</style>
What i want when i click on the div it should comeout from right side.
The problem is window is providing hrizontal scroll, so if a person scrolls to right the div is compltely visible.
I want to stop horizontal scroll so that if the user click on div then only its visible.
Now if any body explain that why its going after -ve pixels, becouse sometime it doesn't go beyond -ve px, sometime it goes, why?
Add overflow-x: hidden; to the Parent element.
Horizontal Scrollbar :
overflow-x: hidden;
Vertical Scrollbar :
overflow-y: hidden;
both: overflow: hidden;
Hide vertical scrollbar of a parent div by using
overflow-x: hidden;
Related
I have hidden the <body> scroll and given height with scroll for div, but the scroll content is not fully visible to the user when user zooms to 175%
body {
overflow: hidden;
}
div {
height: 50rem;
overflow-y: auto
}
How do I make the scroll content visible?
use vh height like height:50vh
I have a fixed footer with scroll and fixed element inside the footer like bellow.
.footer {
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.footer .fixed {
position: fixed;
}
When I scroll the footer, the fixed element inside the footer bounces.
Here is my jsbin. Please access with your iPhone/iPad.
https://output.jsbin.com/wiyewi
Scrolling the bottom red area makes blue square element bounce. With iPad, it moves really big.
As you can see in the input, the element's DOM position ($('blue').position().top) does not change at all. Only the 'visual element' is moving.
Does anyone know how to fix this? I know there are some similar question but none of them are answered...
-webkit-overflow-scrolling touch doesnt work with fixed elements
Position fixed and -webkit-overflow-scrolling: touch;
Basicly I have popup, that is width:100%; height:100%; and has vertical scroll.
My body has vertical scroll too.
So when I scroll the content of the popup, its scrolls until it can, then continues to scroll the body bellow.
Assign height: 100%; and overflow: hidden to body while the pop-up is shown
I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..
.divcon{
margin:0px;
padding:0px;
height:30px;
width:143px;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
float:left;
}
i dont need any scroll bar..i want it like a marquee like feature
One Simple method will be adding overflow in the CSS class:
overflow: scroll;
This will make div scrollable both in horizontal and vertical.
If you want scroll in one direction only, then you should try:
overflow-y:scroll; // For vertical scroll bar
And
overflow-x:scroll; // For horizontal scroll bar
you can have like this
for giving horizontal scroll
overflow-x:scroll;
for giving vertical scroll
overflow-y:scroll;
for giving scroll on both side
overflow:scroll;
From above css default scroll will come it will not depend on the content size
To make it depend on the content size make scroll --> auto
Add
overflow: auto; /* scroll bars appear, only when they are needed */
or
overflow: scroll; /* scroll bars appear (both horizontal and vertical, even when not needed */
There are also other ways of coding overflow, especially if you want a specific scroll bar to appear. Although, these are not widely supported by older browsers (IE8 and earlier).
overflow-x: scroll; /* only horizontal scroll bar */
overflow-y: scroll; /* only vertical scroll bar */
Here is the code for static text, you need to give the width according to text inside the div:
CSS:
.divcon-outer{
width:143px;
}
.divcon{
margin:0px;
padding:0px;
max-height:45px;
width:auto;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
overflow-x: auto;
overflow-y: hidden;
}
.divcon p{
min-width:200px;
max-width:50000px;
margin:0;
padding:0;
}
HTML:
<div class="divcon-outer">
<div class="divcon"><p>I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..</p></div></div>
Here's one example that uses strictly CSS to horizontally auto-scroll as an area with a fixed width is populated. No scroll bars are used or rendered. A few things to note here:
Your question is a bit ambiguous. When you say you want it to auto-scroll, do you mean that you want the content to scroll by as it's added to the div? Do you mean you want it to repeatedly scroll over the same text? Or perhaps something else? I'm assuming here that you're requesting the first option.
The scrolling here uses no JavaScript, but of course some script is needed to populate the div that's being scrolled.
I've only tested this in Firefox and Chrome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#scrollbox{
display: inline-block;
width: 16em;
overflow: hidden;
border: 1px solid #F00;
}
#scrollcontent{
float:right;
white-space: nowrap;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
var idx = 0;
$(document).ready(function(){
setInterval(function(){
idx++;
$('#scrollcontent').append('foo_' + idx + " ");
}, 200);
})
</script>
</head>
<body>
<span id="scrollbox">
<span id="scrollcontent"></span>
</span>
</body>
</html>
That works nicely as long as you're adding text to the div and only wish for it to scroll rightwards as the text is added. If you want it to automatically scroll left and right, then you'll need JavaScript to automatically zig-zag the position of "#scrollcontent". You would need an algorithm that gets the width of the parent span ("#scrollbox" in this case), subtracts that from the width of the child span ("#scrollcontent") and oscillates a number between zero and the result of that subtraction. The x position of the child span would be set to the negative of that number. Note that you would need to give "scrollcontent" an absolute position, and remove the float: right attribute. You would also need to specify the position attribute for "scrollbox", otherwise the absolute position of scrollcontent would be relative the next parent that does have the positioning explicitly defined, rather than scrollbox itself.
I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:
$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
$('#wrapper').remove();
$('body').css('overflow', 'scroll');
return false;
});
At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.
HTML:
<div id="wrapper">
--- some content ----
</div>
<div>
--- rest of the website ---
</div>
CSS:
#wrapper {
background-color: #CCC;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
height: 800px;
}
What has gone wrong?
Found a solution to my problem. I just needed to add:
$('html').css('overflow', 'hidden');
You also can use this, in case something from a theme or style is causing the second bar
html {
overflow-x: initial !important;
}
In my case I tried
$('html').css('overflow', 'hidden');
which was removing the two sidebar but I was unable to scroll down to footer.
I used:
$('html').css('overflow-x', 'initial');
Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom
None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div>. I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main. Reference the screenshot below.
By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll
http://jsfiddle.net/DmqbU/2/
This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)
This solved the problem for me:
body{overflow-y:auto}
Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.
add these lines to your style.css code:
html {
height:100%;
width:100%;
margin:0%;
padding:0%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}