Force vertical scroll bar on animation - javascript

I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.
Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)
But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.
So I want the scroll bar to be there all the time regardless. Is this possible?

Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.
Try wrapping the content in one more div:
<!-- the outer element; pass this one to the animation lib -->
<div>
<!-- the scroll bar will appear on this element -->
<div style="overflow: scroll; height: 100%">
<!-- content here -->
</div>
</div>
Try it here: http://jsfiddle.net/e3BkK/

To always display a vertical scroll bar, you can use
#yourDivId {
overflow-y: scroll;
}
If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.
If it has a bigger height, then the vertical scroll bar becomes enabled.

Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.
body {
overflow: scroll;
}

Related

CSS - Sticky div on horizontal scroll?

I have a div containing a form like this:
The results table below is very wide, so horizontal scroll is needed.
How can I make the form div sticky so that when I horizontally scoll
over the results the form stays on the top?
Only found documentation on vertical scroll with position:sticky, but nothing about horizontal scroll. Any advice will be welcome.
try to wrap the table in the div with class name wrapper or any name you want and add these styles:
.wrapper {
width: 100vw;
overflow-x: scroll;
}

Hide CSS scroll bar till max-width and max-height condition are met

I am trying to show a scroll bar when the content inside div exceeds max-width.
Following is the code snippet to display the scroll positions. But the problem is , the scroll bar is appearing even when there is nothing to scroll. if we run the following snippet in full-screen mode , then we can notice , the scroll bars are visible by default. I need them to appear only when max-width or max-height constrains are meet.
.scrollbar{
height: 150px;
overflow:scroll;
}
.big-box{
height:800px;
width:1000px;
background-color:#A8D0DB;
}
<div class="scrollbar" id="style-1">
<div class="big-box"></div>
</div>
https://jsfiddle.net/g6fehv2w/1/
You can use overflow: auto, which only shows a scrollbar when the content overflows.
You can set overflow-y to auto to only show a scrollbar when the vertical content overflows and overflow-x to auto to only show a scrollbar when the horizontal content overflows.
See the documentation.

Centering my site in html

I was wondering if i could do something similiar to this site (http://www.viralnova.com/hasnt-bathed-60-years-gallery/?mb=sk&Skyid=815). This site has a background then on top of the background their is a clump of content. As you slide the page back and forth the content stays centered, unless you slide the page to the very left. At this point the page stops adjusting and just stays put on the left. I was wondering if their was something to put this effect on my site. Should i make my site content inside a specific div then tell that div to center?
Sorry if my question is confusing.
-thanks
You can wrap your content like following code
<div class="wraper">
<div class="content"></div>
</div>
set the width to the wrapper and margin auto to left and right of the wraper
.wraper {
display:block;
width:200px; <-- define a width
height: 100px;
margin: 10px auto; <-- set margin left and right to auto
background: yellow;
}
Demo

Bottom div with horizontally sliding content

I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!
If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/
This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.

Weird HTML/JS/CSS scrollbar functionality puzzle

So, I have a particularly unique goal I wish to achieve with CSS, HTML and jQuery. Basically, I have a page element that when I mouse over it, I want scrolling to be disabled. I am currently achieving this by setting the body's overflow property to "hidden." However, the disappearing scrollbars means that content is shifting to the right to fill the void created by the disappearing vertical scroll bar. Is there away to make the page behave as overflow:hidden but still display scrollbar placeholders?
You could do it by having a div within a div, such that the outer div is scrollable (auto) and then resize the inner div on mouseover to be exactly the right size.
So by example...
HTML:
<div id="outerTest" >
<div id="innerTest" >
...content goes here...
</div>
</div>
CSS:
#outerTest {
width: 100px;
height: 100px;
overflow: scroll;
}
#innerTest {
overflow: hidden;
}
jQuery:
$("#outerTest").hover(function() {
$("#innerTest").css({width: "100%", height: "100%"});
}, function() {
$("#innerTest").css({width: "auto", height: "auto"});
});
Alternatively, you could also implement a jQuery-based scroll bar. jScrollPane

Categories