Develop Reference

How to scroll parent and child div in same scroll

I have three divs in the following manner: outermost div then inside it the middle div and then inside it the innermost div.
like this ...
.outer{
width: 100%;
height: 110vh;
background-color: red;
overflow: hidden;
}
.middle{
width: 100%;
height: 100vh;
border: 3px solid black;
overflow: scroll;
}
.inner{
width: 100%;
height: 102%;
background-color: cyan;
}
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
what I want to know is, when I scroll inside the innermost div then it scrolls and if it is scrolled completely then it stops, and then when I stop the scroll of the mouse wheel and start again then the window scrolls ...But what I want is, to scroll in one go.. like if I'm scrolling the inner div when it is completely scrolled then the window scroll should start immediately without actually stopping the mouse wheel and starting again.
Is it even possible?

Give this a try. I wouldn't recommend using view height especially if you want scroll to function as intended.
html,
body {
height: 100%;
width: 100%;
}
.outer {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.middle {
width: 100%;
height: 100%;
border: 3px solid black;
overflow: scroll;
}
.inner {
width: 100%;
height: 100%;
background-color: cyan;
}
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>

Dropdown menu scroll bar issue

I want to make a dropdown list looking under the list but it automatically creates scroll bar and inproper height for the list.
Though there are 5 elements on the list, it just shows one and the other ones are not shown because of the inproper height, I guess.
This is the css codes;
NOTE: Please inform me if anything is needed

The containing element probably has the default value (overflow: auto), so it will create a scroll bar when the content is bigger than it's size.
Just make sure your containing element has overflow: visible.
.div1 {
overflow: hidden;
}
.div2 {
overflow: visible;
}
.div3 {
overflow: scroll;
}
.div4 {
overflow: auto;
}
.inner {
height: 200px;
width: 50px;
background-color: red;
color: white;
}
body {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.space {
width: 80px;
height: 100px;
border: 1px solid black;
background-color: blue;
}
<div class="space div1">
<div class="inner">hidden</div>
</div>
<div class="space div2">
<div class="inner">visible</div>
</div>
<div class="space div3">
<div class="inner">scroll</div>
</div>
<div class="space div4">
<div class="inner">auto</div>
</div>

jQuery.draggable() disable horizontal scroll

How to Disable horizontal scrolling?
overflow-x: hidden, doesn't work for me. I wanna drag the lightblue square into the pink field and I need vertical scrolling, but when I enable it the draggable get's caught in the left div.
Here's a fiddle which shows my Problem:
https://jsfiddle.net/2hzxpm3y/
<div class="left">
<div class="draggable"></div>
</div>
<div class="right">
</div>
.draggable {
width: 50px;
height: 50px;
background-color: lightblue;
}
.left {
float: left;
width: 20%;
height: 100px;
overflow-y: scroll;
}
.right {
float: right;
width: 80%;
height: 100px;
background-color: pink;
}
Thanks!

Try this:
.left {
float: left;
}
here is jsfiddle

Dragscroll a div containing floated divs

I am trying to drag-scroll a div containing floated elements. You can play with it here
The intent is that dragging the grey area should drag the pane. I have applied suggestions from similar "expand div to floated content" questions. This is my best effort - vertical overflow looks good but horizontal scroll does not.
added a clear element to the end of the floated elements
added "overflow: hidden;" to parent of floated elements
tried floating the parent div but this didn't seem to fix it
Setting a fixed width works but the content is dynamic.
Code
<div class="title">Tall elements - ok</div>
<div id="wrapper">
<div id="scroller">
<div id="items">
<div class="item-tall">hi</div>
<div class="item-tall">ho</div>
<div class="item-tall">off</div>
<div class="item-tall">...</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="title">Wide elements - not ok</div>
<div id="wrapper2">
<div id="scroller2">
<div id="items2">
<div class="item-wide">hi</div>
<div class="item-wide">ho</div>
<div class="item-wide">off</div>
<div class="item-wide">...</div>
<div class="clear"></div>
</div>
</div>
</div>
$('#wrapper, #scroller').dragscrollable({
dragSelector: '#items',
acceptPropagatedEvent: false
});
$('#wrapper2, #scroller2').dragscrollable({
dragSelector: '#items2',
acceptPropagatedEvent: false
});
#wrapper {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller {
height: 100%;
}
#wrapper2 {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller2 {
height: 100%;
}
#items {
overflow: hidden;
}
#items2 {
height: 100%;
/* width: 500px; this will fix it */
overflow: hidden;
}
.item-tall {
width: 30px;
height: 500px;
float: left;
background-color: white;
cursor: default;
}
.item-wide {
height: 30px;
min-width: 1000px;
float: left;
background-color: white;
cursor: default;
}
.clear {
clear: both;
}
.title {
padding: 20px;
}
References
Horizontal scroll in a parent div containing floated child divs
Floating elements within a div, floats outside of div. Why?

So, What do you want?
Horizontal scroll bar should not appear in your second item?
For that don't assign width in the second wrapper.You have assigned width:220px;, in the second wrapper but only one child has width:300px ,i.e greater than parent width that's why the horizontal scroll bar is coming.
Don't use width for wrapper2....
#wrapper2 {
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
I hope this works.

How can i make a box with 940px width fixed inside a scrollable div?

I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}

You need to write javascript code, where you can get cursor position and depending on that enable scroll event.

Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.