We Keep Coding

SImple question for CSS about scroll - I was clone-coding Facebook

When I use Facebook's dashboard, and I just scroll down the browser, I can see only the main part(newsfeed at home) scrolled to down with infinite scrolling and another parts are fixed on side and top of the screen. How do I implement like this? I mean, scrollbar is on the right side of browser on the Facebook while the scrolling part is just the main contents part, not the inner side(I mean, not at the right side of the inner part - newsfeed). I tried to copy and clone-coding the Facebook and the left side of main(name, Friends, Watch, Group, Events, etcs) scrolled down together.
Real Question is -
How can I just scroll down the part I want, not the whole part?
Please check the image below to make sure what this question is clearly about.
https://i.stack.imgur.com/00uB6.png

Here is an example of structure
.header {
position: fixed;
top: 0px;
background: blue;
width: 100%;
}
.wrap {
display: flex;
position: relative;
top: 15px;
}
.menu {
width: 100px;
position: fixed;
}
.main {
height: 1500px;
border: 1px solid black;
margin-left:100px;
}
<div class="wrap">
<div class="header">Header</div>
<div class="menu">side menu</div>
<div class="main">main</div>
</div>

Check this sample design below. This might help.
Basically, I have used the flex layout as the one to create the page and then I've hidden the scrollbar for the news feed container.
for (var i = 1; i <= 200; i++) {
document.getElementsByClassName("container2")[0].innerHTML += 'scrollable area ' + i + '<br />';
}
* {
margin: 0;
}
.main-container {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container1 {
background-color: #a00;
flex: 0.2;
position: sticky;
top: 0;
align-self: flex-start;
}
.container2 {
background-color: #0a0;
flex: 0.8;
overflow: auto;
}
.container2::-webkit-scrollbar {
width: 10px;
}
<div class="main-container">
<!-- keeps both containers -->
<div class="container1">
<!-- container1 has page links, group links (left side of facebook) -->
Unscrollable area. This will contain the page links, group links and others. This is the left side on facebook.
</div>
<div class="container2">
<!-- container2 has the scrollable news feed -->
This is the news feed. You can use javascript to load more content when user reaches the scroll end of this element. <br />
</div>
</div>

Creating fixed position text as the page scrolls down then stop a certain position

I am trying to create an effect basically exactly the same as the one used on this page: http://www.ohmy.io/work/landrover-live/
When you scroll down the page the text moves with the scroll and then stops at a certain position.
Can anyone direct to how this can be done?
Thanks

I think you're looking for:
.some-class{
position: sticky;
top: //now used to set position to stick to
left: //or you could sticky left, etc.
}
CSS Position

What you can do is switch between classes when you hit the bottom of the page, or location of some element...
This is an example, it can be made better I'm sure
Html:
$(window).scroll(function() {
console.log($(window).scrollTop());
//this is for normal window:
// if($(window).scrollTop() + $(window).height() == $(document).height()) {
//this is for this test:
if ($(window).scrollTop()>100){
$(".stuck").addClass("release").removeClass("stuck");
}
});
.stuck{
position: fixed;
padding-left: 400px;
}
.release{
position: relative;
top: 320px;
padding-left: 400px;
}
.main{
width: 400px;
height: 1000px;
}
.left{
margin-top: 300px;
width: 70%;
float: left;
}
.right{
width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="right stuck">
here i am
</div>
<div class="left">
will you send me an angel
</div>
</div>
or fiddle if you pref: fiddle example

Hide scroll bar of nested div, but still make it scrollable [duplicate]

This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 8 years ago.
This is a reference that I used, which explains how to make a div scrollable with its scroll bar hidden. The only difference is that I have nested divs. Check my fiddle
HTML:
<div id="main">
<div id="sub-main">
<div id="content">
<div id="item-container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
</div>
</div>
CSS:
#main {
width: 500px;
height: 500px;
}
#sub-main {
width: 500px;
height: 500px;
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 500px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Like above, I have a overflowed horizontal div and I want to hide its scroll bar. I have to make it still scrollable because $.scrollTo() wouldn't work otherwise.
UPDATE:
I have read all the answers, but I still have not resolved my problem and don't know what's causing it. This is the live that's having troubles.
Basically, I am trying to follow this almost exactly the same, but there must be some reason that my website isn't working as expected. There are two problems.
When I set overflow: hidden to a parent container of scrollable items, I cannot scroll (native javascript scroll functions do not work too).
I want to scroll just the overflowed container, not the entire window. This can be done by setting a target in $.localScroll({ target: '#projects-content' }) but nothing scrolls when I set the target. If I don't, scrolling works as long as overflow:hidden is not applied.
Again, any help would be greatly appreciated.
HTML:
<div id="projects"> <!-- start of entire projects page -->
<div id="project-sidebar">
<a href="#project-first">
<div class="sidebar-item sidebar-first">first</div>
</a>
<a href="#project-second">
<div class="sidebar-item sidebar-second">second</div>
</a>
<a href="#">
<div class="sidebar-item sidebar-third">third</div>
</a>
</div>
<div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
<div id="project-first" class="project-item">
<!-- these items should be scrollable -->
<div class="project-subitem" id="first-sub1">
<a href='#first-sub2' class='next'>next</a>
</div>
<div class='project-subitem' id='first-sub2'>
<a href='#first-sub1' class='prev'>prev</a>
</div>
<!-- end of scrollable items -->
</div>
</div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->
<script>
// FIXME: when I set target, nothing scrolls.
// But I don't want the entire window to scroll
$('#projects').localScroll({
//target: '#project-content',
hash: false
});
</script>
CSS
#project-content {
width: 80%;
height: 100%;
position: relative;
float: left;
}
#project-sidebar {
float: left;
width: 20%;
height: 100%;
}
.project-item {
width: 300%;
height: 100%;
}
.project-subitem {
height: 100%;
width: 33.33%;
position: relative;
float: left;
}
Update:
After I added overflow:scroll to #project-content, the scrolling works as expected. All I need now is making scroll bars disappear in #project-content. I tried adding overflow:hidden to its parent but had no success. I also tried adding it to html, body, but then the entire document refuses to accept any scrolling functions like scrollTop().
Any help will be greatly appreciated!

Theory :
The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :
Practice :
In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.
The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.
This is the CSS you should add to your website :
#projects{
position: relative;
}
#project-content{
position: absolute;
top: 0;
left: 20%;
bottom: -30px;
/* remove:
height: 100%;
position: relative;
float: left;
padding-bottom: -15px
/*
}

scollbars take up around 20px so just make you scrollable div 20px taller and 20px wider and your scrollbars will be hidden:
#content {
background-color: red;
width: 520px;
height: 520px;
overflow: auto;
}
Example

It's kind of cheating but could you hide it behind the #content like this DEMO
#content {
background-color: red;
width: 500px;
height: 480px;
overflow: hidden;
}
#item-container {
width: 1500px;
height: 500px;
overflow: scroll;
}

If you know all containers that can be scrollable, you can hide scrollbar with CSS and a little bit of JS. For webkit-based browsers (safari, google chrome, opera) it will be CSS-only solution to set scrollbar width to 0. For IE, Firefox and other non-webkit browsers you should calculate scrollbar width that will be used as negative margin-right for you scrollable content.
To do so you should wrap your content into div with overflow-y:scroll to always show vertical scrollbar and hide this scrollbar with margin-right:-17px and parent overflow:hidden. Example is here. No need to set fixed width, nor height.
This is the way that used in jQuery Scrollbar. Hiding horizontal scrollbar is more complicated and requires to handle content changes to recalculate container height.

I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if parent has overflow: hidden. tune padding-bottom or only padding-right, if it is to hide only one of them.
1em is average width of scroll bars in most browsers :
http://jsfiddle.net/5GCsJ/912/

The solution to make the content itself with horizontal scroll.
Just increase the height of #main, and #content.
#main {
width: 500px;
height: 520px;
}
#sub-main {
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 520px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
overflow: hidden;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}

Use a script to create custom scrollbars.
http://manos.malihu.gr/jquery-custom-content-scroller/
Then use CSS(or modify script or change script config) to hide the custom scrollbars.

I did this crudely using jQuery and your example
Check this fiddle:
I simply detected the direction of the scroll-wheel and pushed the horiz-scroll bar with jQuery
$(document).ready(function(){
$('#content').bind('mousewheel', function(e){
var curScroll = $("#content").scrollLeft();
if(e.originalEvent.wheelDelta > 0) {
$("#content").scrollLeft(curScroll-500);
} else {
$("#content").scrollLeft(curScroll+500);
}
});
});
It is "crude" because I hard-coded some values like the 500px amount to scroll, you could write some more javascript to detect dynamically how much to scroll. Plus I don't know if the wheelDelta value will be +120 for up and -120 for down, for you and other users.
Also note that the scrolLeft() can be animated.. for smoother transitions.

SlidesJS trouble with height and button positioning?

I'm currently building a website for myself and having some trouble styling it. By default the re are pagination buttons underneath the slider and a previous and next arrow. I managed to remove the pagination buttons, but am unable to position the next and previous button on top of the slider, these buttons should be vertical centered with the height of the containing images. I'm also having trouble with the height of the slider. The height should be the height of the images. The green part on my website is to much height.
I hope someone can help me!
Thanks a lot for in the advance!
http://test.epicconcepts.nl
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
#slides .slidesjs-container {
margin-bottom:0px;
}
.slidesjs-pagination {
display: none;
}
.slidesjs-previous.slidesjs-navigation {
/* Styles for the Previous nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
z-index: 99;
background-image: url("..//img/prev.png");
}
.slidesjs-next.slidesjs-navigation {
/* Styles for the Next nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
z-index: 99;
background-image: url("..//img/next.png");
}
.slidesjs-control {
background: orange;
max-height: 0px;
}
.slidesjs-container {
width: 100%;
background: green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 700,
autoHeight: true
});
});
</script>

I guess you since removed the slidesjs code from that URL, but I was having the exact same problem 10 minutes ago, so this is how I fixed it:
<div id="slides" class="slides">
<img src="images/1.jpg">
<img src="images/2.jpg">
<a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
<img src="images/arrow-left.png" /></a>
</div>
I just put 2 images and one navigation button for the sake of simplicity.
Then the CSS:
.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
position: absolute;
top: 120px; /* the exact position over the slides, from slide's (0,0) */
}
Remember, the navigation buttons have to be <a class="slidesjs-previous slidesjs-navigation"> directly inside <div id="slides"> or they won't work, don't put Divs in the middle.

Fixed positioning overlap issue

I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link

Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}