We Keep Coding

Move relative object position when scrollbar appears using CSS

On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?

You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>

Scroll full image inside div

I have this image appended to a div JSFiddle
and my Div is inside a modal. I'v tried to display by default the bottom left quarter (like filling the div) and to allow the user to scroll horizontally and vertically to see the rest of the image but it seems that I have some blue areas and I cannot scroll till the end of the image.
imgUrl = "nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"
$('.img-wrapper').append($('<img id="theImg">').attr({
'src': 'https://' + imgUrl ,
'alt': 'test image'
})
)
.img-wrapper {
overflow: hidden;
height: 400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: inline-block;
height: 150%;
width: 150%;
position: relative;
top: -50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="img-wrapper">
</div>
Is there a way to display, when the modal is open, just the bottom left quarter of the image and allow the user to scroll XY to see the rest of it?
I'm new in HTML programming so please be gentle :)

https://jsfiddle.net/2mLbhmuL/61/
CSS:
.img-wrapper {
overflow: auto; /* adds scrollbars */
height: 400px;
background-color: blue;
position: relative;
}
.img-wrapper > img {
height: 200%; /* probably looks neater if auto */
width: 200%; /* double width image to show only first quarter */
vertical-align: bottom; /* moves image to true text bottom */
}
JQuery
Add the following ScrollTop(9999) to the end of your existing JQ to jump the div to the bottom.
.scrollTop(99999)
It's a bit nasty hard-coding a large number but it saves getting a handle to the element (which would allow you to use its real height).
Note:
The vertical-align: bottom is needed for the image to display without showing your blue area underneath. The reason for that is an image is naturally positioned on the baseline of text, so the blue area you were seeing is the space for hanging letters.

The solution is quite simple:
Don't use display: inline-block; as it will place the image will be placed inline and with some margin down. Instead use display: block
The top: -50%; is also moving the picture 50% up leaving it's original position blank

You make this simple:
.img-wrapper {
height: 400px;
width:400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
position: relative;
}
<div id="myDiv" class="img-wrapper">
<img src="https://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg" id="theImg"/>
</div>

Try this: (Assumption - You will adjust for your image size and containing div size as required)
html
<div id="myDiv" class="img-wrapper">
<img src="http://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg">
</div>
JS:
var d = $('#myDiv');
d.scrollTop(d.prop("scrollHeight"));
CSS:
.img-wrapper {
height: 400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: inline-block;
position: relative;
border:1px solid red
}

How to disable background div scroll temporary while the front div can still be scrolled?

I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.
I have tried using css by applying no-scroll css to the background div.
.no-scroll {
position: fixed;
overflow: hidden
}
But every time I applied no-scroll class to the element, it will bounced back top the top.
I also followed
this article
But it disable the entire window scroll and also the font div too. Any suggestion?

I think you should wrap both divs in a container and the toggle class on that. Something like this
var btn = document.querySelector('button'),
wrapper = document.querySelector('.wrapper');
btn.addEventListener('click', function(){
wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }
.wrapper {
height: 500px;
overflow: scroll;
border: solid 2px black;
padding: 2rem;
}
.lower_div {
background: red;
width: 100%;
height: 600px;
position: relative;
}
.modal {
display: none;
height: 20px;
width: 100%;
position: absolute;
z-index: 2;
background: tomato;
}
.modal-is-visible .modal { display: block;}
.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
<div class="lower_div">
<div class="modal">
</div>
</div>
</div>

You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.
You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.

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.

How to continue the background of a div on another div/span?

In my webpage I have have a block with an background and below I have a button that should continue the background.
Here is an example. The left image is what my webpage is now, and the right image is what the webpage should be. You can see that the background continues on the button.
My code structure is something like:
<div id="section-1">
<div class="shown-content">
<div class="background"></div>
<div class="content">
... here are shown contents ...
</div>
</div>
<div class="hidden-content">
... here are hidden contents ...
</div>
<div class="button-content">
<span class="button">FOLD OUT</span>
</div>
</div>
The functionality is that when you click on the button, it triggers the JQuery slideToggle and it shows/hides the hidden-content div.
My idea is to set the button background the same width and height than the content background and then position it where appropriate. But I'm a bit lost because I don't find any way of doing this, and maybe you know a better way.

Let's say your placeholder for the image is 100px in height and the button is 30px.
Let's say your button always are in the center of the main image div.
Then you need an image that is 130px high, where the background position is set to center top and the buttons background position is set to center bottom.
Sample
.imgdiv {
background-position: center top
}
.buttdiv {
background-position: center bottom
}
If your button isn't in the center you need to adjust the "center" part of background position to make it match the main image

Your initial idea is probably the best solution.
Use background position to correctly position you div.
.button-content{
background: url('') no-repeat 200 100%;
}
Numbers afer no-repeat are X position Y position of background image.

I've found this solution, hope it will help you.
Place the fold out button absolute in the relative positioned #section-1.
While placing it absolute, it will only take the width it needs. Then we use the pseudo-classes :before and :after to fill the space on the left and the right with the background color of the body (in my example white).
The HTML looks like this (expandable with your rest code):
<div id="section-1">
<div class="hidden-content">
hidden content
</div>
<div class="button">
Fold out
</div>
</div>
And the CSS:
#section-1 {
min-height: 100px; /*use min-height so it will expand */
background: url('pic.jpg');
position: relative;
padding-bottom: 30px; /* height of .button */
overflow: hidden; /* to hide the :before and :after */
}
.button {
position: absolute;
bottom: 0;
right: 20px;
height: 30px;
width: 75px;
text-align: center;
}
.button:before, .button:after {
content: ' ';
background: white;
position: absolute;
width: 1000px;
left: -1000px;
height: 30px;
}
.button:after {
left: 100%;
}
.hidden-content {
display: none;
}
And a demo.