I have a problem with scrolling over fixed element, it doesn't work on my site. But I saw that there is no such problem in some scrolling examples like this one. After a while I found a little difference - on my site the scrolling of the page is not on the html tag but on the of app's root tag.
Here you can find an example of the situation that I have - you can't scroll over the red block http://jsbin.com/rutogosesa/edit?html,css,output, and here an example where you can scroll over the red block http://jsbin.com/munixamuqo/edit?html,css,output.
My quesion is: how to allow scrolling in first example. I know that I can subscribe on onwheel event and move scrollbar mannually, but it looks weird as all browsers have smooth scrolling my implementation will broke its behaviour, especially for mac users. Maybe there are some other possible solutions?
Let's boil your trouble down to this: if the mouse is over #inner, you can't use the usual methods (spacebar, arrow keys, trackpad, wheel) to scroll #outer up and down.
If you need to keep everything you have, get around this by adding pointer-events: none to the inner element. (Note that this means you won't be able to interact with it at all - so any links in the inner element won't be clickable. Given the examples you gave in your question, that won't be a problem.)
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push" />
</div>
If you can get away with changing your html's styles, you can work around this by dropping the html {height: 100%; overflow: hidden}. This solution doesn't use pointer-events: none so you'll still be able to interact with the inner element!
html {
margin: 0; /* dropped html {height: 100%; overflow: hidden} */
}
body {
height: 100%;
margin: 0;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push"></div>
</div>
Related
I have used overflow-y: hidden; in my css to disable vertical scroll-bars. But still I need to allow users to scroll up and down through the mouse wheel.
How do I allow ONLY mouse wheel vertical scrolling but remove showing scroll-bars using overflow-y: hidden; ?
Any suggestions are appreciated. :)
I assume you're wanting to achieve this without JS?
If that's the case, one approach is to hide the scrollbar by offsetting it outside of a parent/wrapper element. So for example:
HTML:
<div class="wrapper">
<div class="child">
<p>Your content</p>
</div>
</div>
CSS:
.wrapper{
height:200px;
width: 100px;
overflow: hidden;
}
.child{
width: 100%;
box-sizing: content-box;
padding-right: 25px; //This amount will differ depending on browser. It represents the width of the scrollbar
overflow-y: scroll;
}
Try this:
In your css/scss file add to main-component that scrolable and without scrollbar.
In my case it's "page_customers":
page_customers {
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
/*... some css/scss ...*/
}
I'm having a bit of a problem with this design. The page is supposed to start with an image that is focused in the middle of the viewport, then you scroll down below the fold to see more content. I have it working with the code below but there's one issue. The scrollbar throws the viewport image off center. Does anyone know how to fix this? keep in mind, I still want the scrollbar there.
I don't know if this is possible. But could I use jquery to subtract the scrollbar width from the site only if scrollbar is active? I don't really know how to use jquery though. And I feel that if I subtract scrollbar width from 100vw then the site will look off on mobile when there is no scrollbar.
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
overflow-x:hidden;
}
#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}
#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top: 150px;
width: calc(100vw - 300px);
height: calc(100vh - 300px);
}
#belowfold {
}
<html>
<body>
<div id="abovefoldcontainer">
<div id="abovefoldimage">Content goes here</div>
</div>
<div id="belowfold">
Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
I've this html setup...
body
.top
.content
top is fixed fullscreen popup with some other content in it. However, while scrolling reaches to an end in the .top>ul the background item starts to scroll. Which is very nauseating and makes site all slowish on tablets.
On tablets, even when i add overflow hidden to body using jquery it doesn't prevents it for some reason from scrolling the background even sometimes when it's not reached end.
I want no scrolling of background page when popup is on top of the page. It's suppose to be a new slide.
What can i do preferable structure wise, then css, and lastly js.
Demo http://jsfiddle.net/techsin/0bv9g31k/
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
overflow: hidden;
}
.cont {
width: 400px;
margin: auto;
}
These functions freeze and unfreeze the body element, while allowing children to scroll if they have the appropriate overflow property:
function freeze() {
var top= window.scrollY;
document.body.style.overflow= 'hidden';
window.onscroll= function() {
window.scroll(0, top);
}
}
function unfreeze() {
document.body.style.overflow= '';
window.onscroll= null;
}
Working Fiddle
I believe you'll find a solution here, particularly the answer by Troy Alford: Prevent scrolling of parent element?
I suspect your question will be flagged as a duplicate.
I would have added this as a comment on your question but I don't have enough reputation points yet. I also don't feel good about trying to pass off any of the answers on that question as my own, so I'll simply answer with that link and hope it helps you.
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: What I've attempted based on first two answers:
I've made the following modifications to the CSS based on parts of the two answers received so far:
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
overflow-y: scroll;
}
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
</style>
What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
Demo: http://jsfiddle.net/vfSM3/
On the footer div use position fixed and bottom 0 like:
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
If you want to use fixed height on the footer, you could do the following
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.