Develop Reference

Is changing div's height after browser resize to size dependent on text's length and font's size an good idea?

I had some troubles with handling div's size with huge walls of texts for mobiles
So, I came with an idea "what If there's an formula that basing on screen's width/height can set proper height to that div?"
And resulted in something hardcode-ish like:
https://jsfiddle.net/qmde87kt/ (Resize view window a few times)
$(window).resize(function() {
var div = document.getElementById("test");
var width = div.offsetWidth;
var height = (div.innerHTML.length * 70) / width;
div.setAttribute("style", "height:" + height + "px");
});
#test {
font-size: 10px;
border: 2px solid red;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa iaculis, elementum dolor bibendum, maximus orci. Aliquam imperdiet metus mi. Vestibulum cursus elementum ex in tempus. Nulla accumsan, ex eget rhoncus mollis, lectus lacus sodales
neque, ut dictum nibh elit eget tellus. Vestibulum tincidunt quis mi quis egestas. Aenean ultricies purus nunc, id facilisis ante eleifend sed. Proin rutrum luctus turpis, sed pellentesque lorem consequat a. Quisque tortor leo, tempus in ante ac, mattis
faucibus risus. Praesent tristique, odio ac finibus tristique, neque sapien aliquet dolor, in finibus mauris urna sit amet mauris. In hac habitasse platea dictumst. Praesent nunc est, fringilla in condimentum et, gravida a ligula. Vivamus hendrerit
mauris a venenatis dictum. Sed vitae mi eget diam dapibus ultricies. Suspendisse varius turpis ante, nec cursus felis luctus et. Etiam ac ligula et tellus viverra tristique sed sodales ex. Nullam accumsan volutpat libero, vel laoreet sem lacinia sit
amet. Nam id mollis justo.
</div>
So, is there an way better (more universal) formula for something like this? or maybe there's an easier way to do that?

As per what Rory suggestion, I would recommend media queries with below-suggested breakpoints
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
Setting with JS is anyway a costly JOB!!!

Javascript - Adding a top fixed bar and push all the other elements down

I am trying to add top bar on a webpage which has 2 other elements that are top:0 and position:fixed. For example, think of a website with wp-admin bar and a menubar fixed on top.
I am creating a plugin & so I cannot modify the website's code, but can override styles.
Here is my CSS:
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
}
I can see the bar but the others are hidden under it. What I would like for them is to 'move down'. I could add custom css and find the elements' css and add margins, but since this is a plugin, it should work on any website. So I cannot add site-specific styles.
Ideally, this should behave like the mozbar chrome addon, which adds a topbar as an iframe.
Is this possible? Any help would be highly appreciated.
Thank much.
body {
background-color: white;
margin: 0;
padding: 0;
padding-top: 90px;
}
.fixed-bar {
width: 100%;
position: fixed;
top: 0;
height: 40px;
line-height: 40px;
text-align: center
}
.bar-1 {
background-color: gold;
}
.bar-2 {
background-color: pink;
margin-top: 40px;
}
.my-bar {
background-color: blue;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
}
<div class="fixed-bar bar-1">
fixed bar one
</div>
<div class="fixed-bar bar-2">
fixed bar two
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
this has to be on the top of any generic page
</div>

I ended up adding a margin-top to fixed elements at render and on scroll events.
My main top bar is rendered as <div id="appbar-container">...</div> id (to avoid being pushed too). Then I do it like that:
const APPBAR_HEIGHT = 64;
const translateFixed = () => {
Object.assign(document.body.style, {
position: "relative",
top: APPBAR_HEIGHT + "px",
});
for (let e of Array.from(document.body.getElementsByTagName("*"))) {
if (
e instanceof HTMLElement &&
e.getAttribute("id") !== "appbar-container"
) {
const position = getComputedStyle(e)
.getPropertyValue("position")
.toLocaleLowerCase();
const top = e.getBoundingClientRect().top;
if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
e.style.marginTop = APPBAR_HEIGHT + "px";
e.classList.add("appbar-offset");
} else if (e.classList.contains("appbar-offset")) {
e.style.marginTop = "0";
}
}
}
};
// Initial push
translateFixed();
// Push on scroll
document.addEventListener("scroll", translateFixed);
I am not very proud of it though to be honest and I think there is room for improvement... But, well, it works.

If you know the height of your bar, you can wrap all the content of the page with your own block, add some margin above it, and then add your bar using JS. Also it would be nice to set a background color to your bar. Here is an example using jQuery:
$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
margin-bottom:50px;
background-color: lightgrey;
}
.bar-render-content
{
margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="any">
Any text
</div>
<div class="content">
Lorem ipsum porttitor malesuada fusce adipiscing gravida eu sit tellus nam justo sem metus, elementum lorem adipiscing. Enim commodo malesuada porttitor ultricies diam, auctor congue sodales eros sem quisque, risus magna donec integer, lorem donec diam magna vivamus. Adipiscing bibendum pellentesque curabitur orci proin tempus sapien amet: lorem tempus. Quam nam, ipsum magna justo nam lorem nam, eu a fusce donec sed eget metus mauris ligula sagittis rutrum ultricies non at. Sed quisque lectus duis, ut magna malesuada: vivamus — in sagittis porta tempus: curabitur odio — magna risus, sapien — elementum, maecenas porttitor risus integer.
Urna amet orci auctor elementum, magna justo arcu a auctor bibendum sem proin auctor amet justo metus morbi odio maecenas porttitor. Porta magna integer porttitor tellus eros nec ultricies magna rutrum curabitur, porttitor integer nam, sem non orci non nulla.
</div>
</body>

Creating unobtrusive overlay for arbitrary html document

I'm trying to create an overlay that attaches itself to an existing DOM node and covers its entire content area. This should work regardless of whether this node is the body of the page or some deeply nested div. It's key that the layout of the page that I am overlaying should not change. Eventually, my code will run as a browser extension on top of existing html pages.
I am encountering a problem in the very simple case where I am trying to overlay a page with text (or anything that takes space) directly nested within the document body. I have no choice but to append my overlay div as another child node of the body and set its position to absolute and its width/height to 100%. Of course, in the case where the body is statically positioned (default), my div will size to the viewport and not the body's content. If content overflows, my overlay won't cover all of it :\.
All other answers suggest setting the position of the parent div (the body in my case) to define it as the positioning context. I can't do this, however. Changing the position of the document body to 'relative', for example, could change the layout of the content of the body, and defeats the purpose of an unobtrusive overlay. What to do?
Extension-specific suggestions are welcome. For reference, the extension will be for Chrome.
Here's a jsfiddle with a hypothetical page that I have to overlay. Note that although the original page is strangely formatted, my overlay cannot change it.
<body>
<style>
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%
/*some magic I am unaware of*/
}
</style>
<!-- begin original document (stupid hypothetical scenario) -->
<div style="position:absolute;top:0px;width:100%;height:100%;background-color:red;">
<!-- this div is part of the original html document I want to overlay.
It should behave as it did originally, i.e size to the viewport of the document-->
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id tellus vehicula, tincidunt est fermentum, hendrerit dui. Nullam lacinia, justo sed porta hendrerit, nisl quam blandit nunc, ut imperdiet nibh metus in ante. Pellentesque viverra egestas
nulla eu dictum. Aliquam ac accumsan leo. Integer ut tellus odio. Duis blandit venenatis venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vel lorem egestas, tincidunt sem vel, venenatis
ipsum. Donec vitae blandit nibh. Curabitur cursus nunc arcu, id tempor massa gravida ut. Integer vulputate libero in placerat vestibulum. Duis quis turpis vel lectus venenatis rhoncus. Sed congue est consequat, dapibus odio sit amet, sollicitudin arcu.
Praesent hendrerit massa velit, vel pretium erat viverra quis. Proin non enim facilisis, venenatis dolor ut, dapibus nulla. Morbi vestibulum mollis felis ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Ut mollis velit nulla, et tristique sapien auctor eu. Phasellus tincidunt mauris elit, vel fringilla leo consectetur a. Vivamus a porta magna. Mauris hendrerit leo eget sapien aliquet dignissim. Nunc id sem est. Integer sed lacus est. Nulla sit
amet sapien et ex aliquam malesuada quis vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus turpis ligula, elementum sit amet sapien nec, malesuada fringilla nibh. Duis euismod, purus semper viverra aliquam, ligula sem
vehicula mi, sit amet cursus mauris augue vel enim. Donec lacinia diam quis sapien laoreet vulputate in eu est. Proin consequat, ex vitae molestie pellentesque, libero purus pellentesque arcu, id porttitor orci sem a lectus. Morbi mattis in metus quis
euismod. Nam arcu augue, imperdiet eu felis eu, rhoncus facilisis lectus. Nullam placerat, tortor non tincidunt tristique, purus magna cursus leo, vitae sagittis odio turpis sodales nisi. Nullam vehicula erat nisl, ac venenatis massa rutrum sed. Mauris
massa tortor, volutpat vel nisl a, consectetur molestie sapien. Quisque eu elit nulla. Praesent at eros vehicula, lobortis purus quis, efficitur velit. Donec eget faucibus nisl. Praesent pharetra mattis porta. Donec volutpat lacinia dui non maximus.
Vivamus eu sodales leo. Ut eu ipsum scelerisque, consectetur turpis condimentum, malesuada elit. Proin tincidunt mauris metus, eu tincidunt ex ultrices ut. Sed sollicitudin leo nunc, in pharetra ligula egestas ut. Etiam suscipit eget ligula ut convallis.
Ut tempus tellus id ultrices rutrum. Nam accumsan fermentum metus, tristique gravida eros ultricies eget. Integer tortor diam, posuere ut ornare quis, bibendum ut tellus. Maecenas imperdiet lacus vitae felis viverra, nec dignissim lacus volutpat. Curabitur
et elit vehicula ipsum luctus tempor et sed enim. Fusce ultrices eget ante nec consectetur. Donec commodo nunc eget diam tristique, at euismod nisl commodo. Fusce felis neque, vulputate ut tincidunt sed, commodo in risus. Quisque sed magna sodales tortor
condimentum aliquam. Phasellus mattis justo eget diam tincidunt luctus. Cras pharetra ultrices sem, sed sollicitudin purus feugiat sed. Vivamus vitae tempor velit.
<!-- end original document -->
<div class='overlay'>
<!-- this div is my overlay. It should size to the content of the document body, not the viewport. Careful setting the body's position to relative, the other div will change!-->
</div>
</body>

I think you're best off appending one element to the body (unless you have access to some higher stacked element available to extensions) and simply use the element.getClientBoundingRect() to obtain the position and dimensions.
function applyStyle(element, styles) {
for (var key in styles) {
element.style[key] = styles[key];
}
}
var overlay = document.body.appendChild(document.createElement('div')),
indicator = overlay.appendChild(document.createElement('div'));
// apply the styles
applyStyle(overlay, {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 2147483647, // it doesn't get higher than this
pointerEvents: 'none'
});
applyStyle(indicator, {
position: 'absolute',
border: '1px dotted red',
backgroundColor: 'rgba(255,0,0,0.2)'
});
window.addEventListener('mouseover', function(event) {
var bound = event.target.getBoundingClientRect();
applyStyle(indicator, {
top: bound.top + 'px',
left: bound.left + 'px',
width: bound.width + 'px',
height: bound.height + 'px'
});
});
.foo {
position: absolute;
top: 30px;
left: 10px;
width: 300px;
border: 1px solid gold;
}
.bar {
position: relative;
width: 40%;
margin: 200px auto 0;
max-height: 10em;
overflow: hidden;
border: 1px solid green;
}
<div class=foo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh dapibus tellus varius tristique vitae id elit. Fusce vestibulum neque a scelerisque pellentesque. Vestibulum eu odio risus. Aliquam id tellus in mauris sollicitudin vestibulum. Aenean vestibulum et massa vel dapibus. Pellentesque eu lectus odio. Aliquam vitae fermentum mauris. Pellentesque feugiat sem vel dolor imperdiet tempor.
</div>
<div class=bar>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh dapibus tellus varius tristique vitae id elit. Fusce vestibulum neque a scelerisque pellentesque. Vestibulum eu odio risus. Aliquam id tellus in mauris sollicitudin vestibulum. Aenean vestibulum et massa vel dapibus. Pellentesque eu lectus odio. Aliquam vitae fermentum mauris. Pellentesque feugiat sem vel dolor imperdiet tempor.
</div>
The bits of "trickery" in here involve:
using the maximum z-index combined with the overlay element being the last element within <body> makes it nearly impossible for any page to rise above it
the little known getBoundingClientRect treasure
pointer-events: none css, removing the interactivity from the overlay element (simply add pointer-events: auto on the indicator to re-enable)
As you are targeting one specific browser and a (evergreen) modern one, I don't think you should use jQuery. You don't need it.

I don't know whether jQuery is an option but I couldn't resist... Here's how you could use jQuery to style your overlay
var $thingToOverlay = $('#someDivOrWhatever'); // use $(document) for whole page
var $overlay = $('.overlay');
var getMaxZ = function($elements){
var z;
return Math.max.apply(null, $elements.map(function(){
return isNaN(z = parseInt($(this).css("z-index"), 10)) ? 0 : z;
}));
};
$overlay.css({
'position': 'absolute',
'box-sizing': 'border-box',
'background-color': 'red',
'height': $thingToOverlay.height(),
'width': $thingToOverlay.width(),
'top': $thingToOverlay.offset().top, // don't use this for whole page (document), just set to 0
'left': $thingToOverlay.offset().left, // ditto
'z-index': getMaxZ($overlay.siblings()) // assuming overlay is last on page, no need to +1
});
This will obviously need some logic around it depending on whether the overlay needs to cover the whole page or just a div but you get the idea?

Running a function to change images every time <h4> reaches middle of window

I'm completely blocked with this issue. I need to run a function which changes the image every time my h4 reaches the middle of window. In my case, one image per h4, changing it when user scrolls down or scrolls up. That's to say, each img will belong to a h4. Up to now, I've achieved change the opacity per h4 but I don't get change the image. Here's my html:
<div id="column-left">
<h4 class="active">Targets</h4>
<h4>Valors</h4>
<h4>Me </h4>
</div>
<div id="column-right">
<img src="img/about/map.jpg" class="active" alt="Map"/>
<img src="img/about/bridge.jpg" alt="Bridge"/>
<img src="img/about/road.jpg" alt="Road"/>
</div>
Here's my code:
var findMiddleElement = (function(docElm){
var viewportHeight = docElm.clientHeight,
elements = $('h4');
$('h4').first().css('opacity','1','important');
return function(e){
var middleElement;
if( e && e.type == 'resize' )
viewportHeight = docElm.clientHeight;
elements.each(function(){
var pos = this.getBoundingClientRect().top;
// if an element is more or less in the middle of the viewport
if( pos > viewportHeight/2.5 && pos < viewportHeight/1.5 ){
middleElement = this;
console.log('I am in the middle');
changeImage();
return false; // stop iteration
}
});
$(middleElement).css({opacity:'1', transition : 'opacity 1s ease-in-out'});
}
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
function changeImage(){
console.log('I am ready to change the image');
$('img').each(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
}
And here's the fiddle:
jsfiddle.net/antoniobarcos/owv1ysto/4/
Thanks in advance.

Your changeImage() just assigns the active class to the last image element on the page. You don't have any css rule, regarding the behaviour of that class on an image element, so obviously it does not affect anything. I see two possible solutions:
Send the index of the current h4 element (you are looping through them) to the changeImage function and select the img:nth-child(idx + 1) element to apply the active class. It would also require some css like img { display: none; } img.active { display: block; }. In my opinion this is not very flexible.
Add some attribute, e.g. data-image, with the source for the image, corresponding to each of h4 element. Then, you would have only one image element in the right-column and your code would look like something similar to this:
/* CHANGE MI IMAGE PLEASE */
var findMiddleElement = (function(docElm) {
var viewportHeight = docElm.clientHeight,
elements = $('h4');
$('h4').first().css('opacity', '1', 'important');
return function(e) {
var middleElement;
if (e && e.type == 'resize') viewportHeight = docElm.clientHeight;
elements.each(function(idx) {
var pos = this.getBoundingClientRect().top;
// if an element is more or less in the middle of the viewport
if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
middleElement = this;
console.log('I am in the middle');
changeImage($(this).data('image'));
return false; // stop iteration
}
});
$(middleElement).css({
opacity: '1',
transition: 'opacity 1s ease-in-out'
});
};
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
// You probably don't need a function with one line
function changeImage(src) {
console.log('I am ready to change the image');
$('img').attr('src', src);
}
html,
body {
width: 100%;
height: 100%;
font-size: 0;
margin: 0;
padding: 0;
background-color: #000;
}
h4 {
text-transform: uppercase;
}
.left-column {
display: inline-block;
width: 40%;
height: 100%;
height: 100%;
background-color: #000;
font-size: 16px;
color: #FFF;
padding: 20px;
box-sizing: border-box;
}
.right-column {
display: inline-block;
width: 60%;
height: 100%;
height: 100%;
background-color: black;
position: fixed;
}
.right-column img {
min-width: 100%;
min-height: 100%;
}
h4 {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-column">
<h4 data-image="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg"> Targets </h4>
<p>Nunc vitae turpis sem. Aliquam augue ligula, lacinia quis massa volutpat, fermentum ornare quam. Donec lacinia lorem orci, sit amet facilisis arcu posuere eu. Proin eu mauris ligula. Pellentesque fringilla, nisl eu ullamcorper hendrerit, nisl neque
auctor turpis, nec placerat justo massa vel erat. Vestibulum quis metus et tellus feugiat hendrerit. Nunc volutpat in turpis id imperdiet. Duis odio massa, maximus at pulvinar eu, semper sed eros. Praesent consectetur eros a neque accumsan, at semper
libero pharetra. Sed tempor, nunc quis gravida congue, lacus nisi aliquam urna, sed hendrerit risus risus eget ipsum. Vivamus eu consequat risus. Fusce tempus rhoncus odio non gravida. Nunc in ante lacus.</p>
<h4 data-image="http://www.jeremynoeljohnson.com/wp-content/uploads/2014/12/mountain.jpg"> Valors </h4>
<p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
congue urna. Sed posuere mollis consectetur.</p>
<h4 data-image="http://collabcubed.files.wordpress.com/2012/10/high-trestle-trail-bridge_kevin_eberle_booneiowa_collabcubed.jpg"> Me </h4>
<p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
congue urna. Sed posuere mollis consectetur.</p>
</div>
<div class="right-column">
<img src="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg" />
</div>
Note that when you scroll back up, the image won't change to the first one, since the first h4 element is not in the middle. You should fix that case, if it is not desired behaviour.

How to hide the scrollbar using JavaScript

How can the scrollbar be hidden? I want to do this because the scrollbar is not nice.
overflow:hidden is not useful, because my div element has many other elements.
So setting overflow does not solve my problem.

You can hide the scrollbar with this...
document.body.style.overflow = 'hidden';
...and unhide it with this:
document.body.style.overflow = 'visible';
However, you have to question yourself whether this is really what you want. Scrollbars appear for people to be able to view things that are outside of their small screens.

You have to overwrite the CSS settings as follows:
<style type="text/css">
#YourSpecialDiv { overflow: hidden !important; }
</style>
And the div you should add the id tag i.e.
<div id="YourSpecialDiv"...>...</div>

I don't think there is actually a way to just hide scrollbars properly.
What overflow:hidden, overflow-x:hidden and overflow-y:hidden do is actually 'if it goes outta 100vw/100vh/100vw an 100vh then do not display it'. Overflow is only do not display what's outside of the current(initial tbh) view.
It hides scrollbar because everything that is in the HTML that should be outside will not be on the page when viewing it (nothing needing scroll so no scrollbar).
The only hide available is (here to hide the Y-axis scrollbar) :
[container]{
overflow:scroll;
overflow-x:hidden;
}
[container]::-webkit-scrollbar{
width:0;
background-color:transparent;
}
Which is a real hide of scrollbar, and sadly works only on webkit-based browsers.
If one day all vendors accept this then it will be amazing and we'll finally be able to hide scrollbars.

You can use the following on any element:
::-webkit-scrollbar {
width: 0px;
}
Source
This only works on webkit browsers, so no IE and Firefox.

You have to use the CSS property overflow, which 'manages' what should happen when the content of a certain element exceeds its boundaries. Setting it to hidden hides the scrollbars.
overflow: hidden;
or
someElement.style.overflow = 'hidden';

The best way to do this would be some sort of pseudo element css selector. But I think only webkit (Chrome/Safari) has one for the scrollbar, so it isn't very cross browser.
A hacky alternative is to wrap it in a div that hides away the scrollbar, by setting the width smaller than the contained div by the scrollbar's size
DEMO (may take a while to get the css perfect, but you get the gist)
The problem here is that scrollbar sizes differ per-browser, so you'll have to make the outer div the largest of the scrollbars' width's smaller. And to not cut off any content in the browsers with the smaller scrollbars, it'd be best to add padding of the biggest size difference for scrollbars.

var container = document.querySelectorAll("div.container")[0];
container.addEventListener("wheel", function(event) {
/*Mouse wheel scrolled down*/
if (event.deltaY > 0)
container.scrollTop += 30;
/*Mouse wheel scrolled up*/
else
container.scrollTop -= 30;
}, false);
div.container {
height: 15rem;
width: 20rem;
overflow: hidden;
padding: 1rem;
border: 1px solid;
font-family: "Seoge UI", "Calibri", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
}
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus odio, scelerisque vel sollicitudin sed, ullamcorper sed dolor. Vivamus sed egestas nisl. Ut sollicitudin finibus tortor sit amet posuere. Cras erat massa, auctor non urna quis, interdum sollicitudin sapien. Pellentesque gravida ullamcorper est. Maecenas accumsan lobortis mauris, et auctor urna mattis et. Fusce venenatis, magna blandit faucibus sodales, tortor nunc lacinia ligula, bibendum euismod leo felis placerat velit. Fusce sed arcu vitae metus ultricies tincidunt auctor a diam. Duis at augue efficitur eros rutrum iaculis. Praesent eu maximus orci. Praesent lobortis semper elit vitae convallis. Donec consequat lectus tortor, vel aliquam diam fringilla ut. Sed ac tempus justo. Ut bibendum euismod magna, id egestas lacus pulvinar ut. Sed sit amet felis ornare, gravida leo ac, semper dui.</span> Pellentesque efficitur eget nisl tincidunt gravida. Aenean sed nisl commodo, porta lectus in, tincidunt dui. Vivamus eget nunc ipsum. Praesent sed quam odio. Proin aliquam dapibus dictum. Maecenas tristique lorem id erat venenatis, a varius nibh accumsan.
Nulla tempor sagittis odio, nec ultricies sem posuere ornare. Vestibulum sit amet consequat neque. Cras iaculis eleifend nisi. Sed erat mauris, fringilla nec congue quis, lobortis in justo. Quisque sit amet metus id ligula mattis elementum. Morbi sodales,
dui eget fringilla pretium, sem tellus posuere dolor, id pharetra neque elit ac nisl.<br /> Quisque <br />nibh<br />enim,<br />mattis<br />a<br />aliquam<br />eget,<br />luctus<br />id<br />velit.<br />Pellentesque<br />sodales<br />eros<br />eget<br
/>diam<br />gravida<br />porta.<br />Maecenas<br />leo<br />tortor,<br />malesuada<br />quis<br />euismod<br />sed,<br />dictum<br />ut<br />nulla.<br />Vestibulum<br />in<br />massa<br />a<br />quam<br />vehicula<br />placerat<br />in<br />quis<br
/>libero.<br />Maecenas<br />convallis<br />bibendum<br />faucibus.<br />In<br />porttitor<br />quis<br />justo<br />non<br />tincidunt.<br />Pellentesque<br />at<br />justo<br />tincidunt,<br />auctor<br />tortor<br />at,<br />tempus<br />eros. <br
/>Generated: 5 paragraphs, 414 words and 2814 bytes of Lorem Ipsum
</div>