I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
Related
I want to add two Div in the page, one Div for the top part, which is ready-only, the other one Div for the lower part, which is editable. What I want to achieve is:
Make the lower Div editable and scrollable if content is too long.
While scrolling the lower Div, the top Div should stay at the same position
Here is the code I have:
<html>
<body>
<div>
<div>Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>
In the code above, if I click on the lower Div, we can then type, then if we keep pressing Enter, it will show the vertical scroll bar, but if I scroll, the top Div will be scrolled up too, which I want to avoid.
So, how can I make the scroll bar only applied to the lower Div?
The scrollbar currently gets applied to the entire window, so all elements on the page scroll up and down together. One alternative is to make the editable area scrollable. Restrict the height of that area and set its overflow to "auto" or "scroll".
.edit {
max-height: 5em;
overflow-y: auto;
}
<div>
<div>Top Part</div>
<div contenteditable="true" class="edit">Click here to type</div>
</div>
You can avoid setting a specific height for the scrollable area by using the window height as the limiter. One method is to use flexbox so that the scrollable area fills the remaining window height. Here's an example. In your case, the <body> can be the "outer" flexbox container.
In the demonstration below, the <body> is split into two areas: the top area and a bottom "scrollable-container" area that fills the remaining window height. The bottom area limits the maximum height of the editable/scrollable area.
I also added a "placeholder" technique discussed here: Placeholder for contenteditable div.
html,
body {
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background-color: #EEF;
}
.scroll-container {
flex: 1;
min-height: 1em;
}
.scrollable {
max-height: 100%;
overflow-y: auto;
}
.header,
.scrollable {
padding: 0.5em;
box-sizing: border-box;
}
[contenteditable=true]:empty:before {
content: attr(data-placeholder);
color: grey;
font-style: italic;
cursor: text;
}
<div class="header">Top Part</div>
<div class="scroll-container">
<div contenteditable="true" class="scrollable" data-placeholder="Click here to type"></div>
</div>
If you mean that you want the top part to always be viewable at the top, you can use position: sticky.
.sticky {
font-size: 2em;
position: sticky;
top: 0;
}
[contenteditable=true] {
border: 0.1em solid black;
}
<html>
<body>
<div>
<div class="sticky">Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>
You could do somthing like this:
.scrollable{
overflow-y: scroll;
max-height: 150px;
}
<html>
<body>
<div>
<div>Top Part</div>
<div class="scrollable" contenteditable="true">Click here to type</div>
</div>
</body>
</html>
I'm trying to do an effect that hide a div behind other like this page: Canalla Agency. I use two divs and the last one with position fixed, and it's worked, but the div lost the height.
Sorry for my explanation but I'm not good in CSS positioning and Javascript. I hope you can help me and see you soon. Thanks.
Solution with three <div>'s:
The only tricky bit is the "viewer" div creates the scrolling space to see the background div.
No JS required!
Also remember to specify position when using z-index.
<html>
<style>
#cover, #viewer, #background {
box-sizing: border-box;
position: relative;
padding-top: 50vh;
text-align: center;
height: 100vh;
width: 100%;
}
#cover {
background-color: paleturquoise;
z-index: 1;
}
#viewer {
z-index: -1;
}
#background {
background-color: coral;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div id="cover">
<h1>This Scrolls Up</h1>
</div>
<div id="viewer"></div>
<div id="background">
<h1>This Stays Static</h1>
</div>
</body>
</html>
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
There're 2 divs - top and bottom.
The bottom should serve as a 'buttons pane', so visible and 'pinned' to bottom border at all times. root div is a Kendo UI Window div (see jsbin fiddle)
The problem is that the scrollbar is not being shown ONLY for the top div, but for 'buttons pane' as well. In the given jsbin resize down the window vertically, so the scrollbar appears:
http://jsbin.com/UrasoKi/3/edit
<style scoped>
#top{
min-height: 500px;
width: 100%;
background-color: blue
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
</style>
<div id="w">
<div id="top">TOP PANE</div>
<div id="bottom">BOTTOM PANE</div>
</div>
I would like to achieve clear bottom div positioning with css. Scrollbar should appear for TOP panel ONLY.
Elements MUST BE positioned INSIDE <div id='w'/> in fiddle (because of telerik kendo window resize handles) AND BE RESIZABLE, so any extra volume would be given to the top pane. But extra divs could be added into it (into div id="w")
I've been trying to play around for hours, something is missing.
I would tweak as follows to provide the sort of functionality you want:
<body>
<style scoped>
#top{
height: 100%;
width: 100%;
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
#inner {
overflow-y:scroll;
height: 100%;
background-color: blue
}
</style>
<div id="w">
<div id="top"><div id="inner">TOP PANE</div></div> <div id="bottom">BOTTOM PANE</div>
</div>
<script>
$(document).ready(function() {
$('#w').kendoWindow({
width: '450px'
});
$('.k-window-content').css({'overflow':'hidden', scrollable: false })
});
</script>
</body>
The tweaks include fixing the size of the Kendo Window and adding an inner div with fixed height and overflow-y scrolling for the top panel.
I hope this helps...
The attribute min-height: 500px; is causing the window to show a scrollbar. You would want to put the two divs in another div with a fixed min-height and then give the two divs a fixed min-height
Edit:
Edited your fiddle, see if that is what you need.
http://jsbin.com/efOgoVE/10/edit
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.