Develop Reference

overflow-y: hidden but should enable mouse scrolling

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 ...*/
}

Move text along with notification bar on top of the page

I made a simple slide up from the bottom notification bar for my page. Everything works perfect as intended, but when I try to make that bar slide down from the top of the page, the behaviour of the text is different. If I make it slide up from the bottom, the text moves along with the div, when sliding down from above, the text appears to stay in place as the div rolls over the text. How can I prevent this from happening?
below is my code to make it pop up from the bottom (the text moves along inside the div), when I make the change to "top: 0" instead of "bottom: 0". The text appears to be in a fixed position from the start.
$("p").click(function() {
$('#message-box').slideToggle('slow').delay(1500).slideToggle('slow');
});
#message-box {
display: none;
width: 100%;
background-color: #FFA339;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: #35220C;
position: absolute;
bottom: 0;
z-index:50;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id='message-box'>notification</div>
<p>click here</p>

So - the bar is 50px high, and the text is centered in those 50px thanks to its line-height. That calculation is based off the text's space from the top of the container.
When sliding from the bottom of the screen, the height of the bar is growing from bottom to top. Because the text's position is based off the top of the container, this creates the visual effect of the text sliding "with" the box as the top of the container shifts up, making it look like they're animating together.
When sliding from the top of the screen, the height of the bar is growing from top to bottom. The text doesn't shift because it's always spaced from the top of that container, occupying the same 50px from the top of the screen, so you just see it "reveal".
So, as a fix, I've removed the jQuery animation altogether and showed you how to accomplish this animation using a much smoother CSS transition. Now, by toggling a class with jQuery, the entire bar shifts from off-screen to on-screen, rather than its height changing.
$("p").click(function() {
$('#message-box').addClass('show').delay(1500).queue(function() {
$(this).removeClass('show').dequeue();
});
});
#message-box {
width: 100%;
background-color: #FFA339;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: #35220C;
position: absolute;
top: 0;
z-index: 50;
font-weight: bold;
transform: translateY(-100%);
transition: transform .6s;
}
#message-box.show {
transform: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id='message-box'>notification</div>
<p>click here</p>

Keep image stationary, that's location is relative to nearby text

In the very middle of the screen I have a piece of text, along with an image. When the text gets longer, the image is forced to move the right, which is what its supposed to do. But what I want it to do, is keep the image in the same spot, and make the text shift over to the left instead.
(I will also be adding more names so I need this fix to be universal, not like manually changing it for each piece of text.)
(It might be hard to see, but its noticeable, and yes I'm using a template...)
My site - Updated link
I tried messing with the HTML to get the margin-right once the page is fully loaded, then when it updates the text change the margin-right to that, but it did absolutely nothing.
Any help is appreciated, I have no idea how to fix this issue.

What about this?
#banner .content {
display: inline-block;
margin-right: 1%;
max-width: 95%;
padding: 6em;
position: relative;
text-align: right;
vertical-align: middle;
z-index: 1;
float: left;
width: 66%;
}

You can solve this issue by defining the width property for the containing content layer, and then floating the image and the text to the right.
For example, if you want the right-hand side of the text to be aligned to the center of the page your image + it's left-hand margin needs to be half the width of the containing #banner .content layer.
With your image being 18rem square with a left-margin of 3rem your containing #banner .content div needs to be 42rem wide ((18 + 3) * 2).
#banner .content {
position: relative;
width: 42rem;
height: 18rem;
text-align: right;
vertical-align: middle;
/* center div.content */
margin: 0 auto;
clear: both;
display: block;
z-index: 1;
}
#banner .content .image {
width: 18em;
height: 18em;
border-radius: 100%;
vertical-align: middle;
margin-left: 3rem;
display: inline-block;
}
Content inside .content slides to the right with the span.image locked to its right-hand edge. As long as the text-container's width (header) does not exceed half the width of `.content' it will remain right-aligned 3rem from images left-hand side. Avoid using css-padding for positioning control and use css-margin properties instead.

Stop an absolute positioned div to move within relative parent

I have two divs inside a container. One is absolutely positioned and is on the top. The second div is the bottom of their container. They are both inside a container that is has position: relative. If the user scrolls horizontally not vertically on the bottom div, the absolutely positioned div will also scroll. The problem is that since it is positioned absolutely, the entire div will move when the bottom is scrolled.
Is there a way to prevent this? I just want to div to remain in place no matter what.
Here is a JSFiddle example. I can't just change the position: relative attribute of the container because in my case, it would mess up everything else in the page.
https://jsfiddle.net/2m16rtjp/6/
To see a desired set of results (I'm talking about how it is viewed when scrolling horizontally), replace position: absolute to position: fixed for .titleSection-right. I need to have the div positioned absolutely for a plugin to work.

I provided new fiddle with simple markup, as yours is not clear enough, hope this help,
The idea is very simple, on rightSide scroll, we can change left of titleSection-right.
HTML:
<div class="container">
<div class="box1">
<div></div>
</div>
<div></div>
</div>
CSS:
.container {
position: relative;
width 500px;
overflow-x: auto;
height: 200px;
}
.box1 {
position: absolute;
width: 400px;
height: 50px;
background-color:red;
overflow: auto;
}
.box1 > div{
width: 2000px;
height: 200px;
}
.box1 + div{
width: 2000px;
height: 200px;
}
JS:
$('.container').on('scroll', function(){
$('.box1').css('left', $(this).scrollLeft());
});
jsfiddle link

Try position:fixed instead of postion:absolute
.titleSection-right {
position : fixed;
top : 0;
}

add this in your script
$(".rightSide").scroll(function() {
if ($(".rightSide").scrollLeft() > 0)
{
$(".titleSection-right").css( "position", "fixed" );
} else {
$(".titleSection-right").css( "position", "absolute" );
}
});

Put two 100% width divs side-by-side

So if I want to have two divs, each of 100% of the entire page, side by side, given that the wrapper has overflow:hidden, how should I go about implementing it?
I have tried using inline-block but it did not work.
I have tried using float too but it caused errors.
I want the second div to be hidden so I can change it's left as an animation, sort of like a slide.
Thanks in advance!

If I've understood you correctly, you can achieve what you're after using inline-block. You just have to be a little careful with white space (i.e. you need to make sure you've got no white space between the two child div elements). I've stopped the divs from wrapping by setting white-space: nowrap;.
<div class="foo">
<div> woo woo !</div><div> woo woo !</div>
</div>
.foo {
overflow: hidden;
white-space: nowrap;
}
.foo > div {
display: inline-block;
vertical-align: top;
width: 100%;
background: aqua;
}
.foo > div + div {
background: lime;
}
Try it out at http://jsfiddle.net/8Q3pS/2/.
Edit: Here's an alternative implementation using position: absolute;: http://jsfiddle.net/8Q3pS/5/. That way you'll be able to animate the second one into view using left. Note that you'll need to set a height on the parent div.
.foo {
position: relative;
width: 100%;
height: 1.5em;
overflow: hidden;
}
.foo > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: aqua;
}
.foo > div + div {
left: 100%;
background: lime;
}

This should be purely a matter of positioning one of the divs off the page using absolute positioning and transitioning the left property using either hover state or javascript.
Hover the red div.
Codepen Example

Could you not set max-width to 100%, not set the actual width and float them side by side? With both overflow:hidden, as they expand it should create horizontal scrollbars.