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
Related
I would like to use anchor tags to scroll within a div on the webpage. However, when I click on the anchor tag, the entire page jumps to the anchor tag within the div.
The content within the div should scroll, without the body of the webpage autoscrolling.
I've been googling and trying to figure this out for weeks & have not yet found an acceptable solution. It seems to be a really commonly asked question, too.
I know very little about javascript, but from what I gather there seem to be two possible ways of accomplishing this:
1. To make the body of the page scrollable only by mousewheel/manually and not with anchor tags. This would apply to the body only and not other elements.
-or-
2. To scroll to the anchor tag within the div, and cancel the process before it affects the body.
A bonus would be if it did not add the anchor tag to the url.
Here are some additional links to similar questions, may have some ideas you could work with:
seems promising, could not get it to work
Scrolling within a div without moving page
uses event.preventDetfault() or event.returnValue = false
may work for body after anchor link scroll to right
http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/
other ideas for similar problems
How to prevent page scrolling when scrolling a DIV element?
How to go to anchor tag in scrollable div without having the whole browser jump down?
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
other approaches to similar question
HTML anchor link with no scroll or jump
Here is a sample HTML and CSS with the relevant elements. You may resize the browser window so that there is a scrollbar for the main page to see the undesirable autoscroll effect:
<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
2
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>
Here is the CSS
html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
#right {
background-color: MediumSeaGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
a#link {
float: right;
margin: 0;
padding: 0;
}
Maybe you can gain some points for definitively answering this commonly asked question?
You can use the scrollTop function from Jquery to position the scrollable div exactly how you want it.
$( "#viv_button" ).click(function() {
var container = document.getElementById('col2');
var scrollTo = document.getElementById('viv');
container.scrollTop = scrollTo.offsetTop;
});
Here is a fiddle of it working
I used anchor tags to locate it, but you can use anything with an ID.
I found this occurred because there was a parent of the element within which you have your href='#id_of_element'.
To fix this....
// javascript
document.body.position = 'absolute';
// or css
.body {
position: absolute;
}
You could use fixed, or relative. But this stops the body ( main page ) from scrolling on selection of href somewhere within a child element.
I'm having a very difficult time accomplishing what I want to do, and I'm starting to wonder if it's possible at all. Essentially, I have three divs that each vary in width depending on which one you're hovering over (simple transitions). The height of these divs is always equal to 100% height of the browser window, calculated with jQuery.
I use overflow-y: scroll to accomplish multiple sections of scrollable content. However, it looks clunkly to include three scrollbars, so I'm trying to get rid of them. On chrome, it's easy, I just use ::-webkit-scrollbar { display: none; }, but for other browsers it isn't quite as simple. Other questions have answered saying I need to be wrapping my content in a div that has overflow: hidden but I can't quite get that to work without all these transitions completely failing.
Here's a demo of what I'm talking about. Thanks in advance!
overflow-y: hidden will hide the scrollbars, if you set this to scroll on :hover only you will still be able to scroll each panel when the user hovers over it:
.panel {
overflow-y: hidden;
}
.panel:hover {
overflow-y: scroll;
}
The previous examples were missing the default hidden, that will stop the panels scrolling back to the top.
You can show the scrollbar on hover
#container .display-panel:hover {
overflow-y: scroll;
}
remove the overflow-y from display-panel http://jsfiddle.net/9T7ex/1/
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.
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;
}
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;
}