I am tying to implement a Draggable overlay screen(initially positioned at the bottom half) that passes through another screen. An example of how I would like it to look is as described here - https://medium.com/#iamWaseem99/how-to-make-swipable-draggable-overlay-views-in-swift-xcode-82a86adece9c.
Disclosure regarding the tools currently being used - TailwindCSS for styling, HTML, CSS and JS via the Stimulus JS framework.
Current approach - I have installed Hammer JS and was attempting to achieve this by tracking the "panup" event and adjust the height of both the divs to seem as through the bottom screen was passing through. This ended up being messy, was wondering if there is a cleaner approach to achieve this.
I have found a React library - https://github.com/manufont/react-swipeable-bottom-sheet, however I am currently not using the React framework so was wondering if there are any alternatives through which this can be achieved.
Thank you!
Based on the two links in your question i made a solution with Hammer.js but with "swipe" and top instead of "panup" and height. I don't know what is messy for you, but this is imo very clean:
hammerOverlay.on('swipe', (e) => {
overlay.style.top = ( e.deltaY < 0 ) ? 0 : (window.innerHeight - triggerHeight) + 'px';
});
Working example:
const overlay = document.querySelector('#overlay');
const triggerHeight = document.querySelector('#trigger').clientHeight;
const hammerOverlay = new Hammer(overlay);
hammerOverlay.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
hammerOverlay.on('swipe', (e) => {
overlay.style.top = ( e.deltaY < 0 ) ? 0 : (window.innerHeight - triggerHeight) + 'px';
});
#wrapper {
position: relative;
}
#overlay {
position: fixed;
top: calc(100% - 50px);
background-color: #ddd;
transition: top 300ms;
}
#trigger h3 {
height: 50px;
margin: 0;
text-align: center;
background-color: #eee;
}
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<div id="wrapper">
<div id="overlay">
<div id="trigger"><h3>Swipeable bottom sheet</h3></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
If you want an arrow like that in your first link, here is a solution with css arrows:
const overlay2 = document.querySelector('#overlay2');
const triggerHeight2 = document.querySelector('#trigger2').clientHeight;
const hammerOverlay2 = new Hammer(overlay2);
hammerOverlay2.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
hammerOverlay2.on('swipe', (e) => {
if( e.deltaY < 0 ) {
overlay2.style.top = 0;
overlay2.querySelector('.arrow').classList.remove('up');
overlay2.querySelector('.arrow').classList.add('down');
}
else {
overlay2.style.top = (window.innerHeight - triggerHeight2) + 'px';
overlay2.querySelector('.arrow').classList.remove('down');
overlay2.querySelector('.arrow').classList.add('up');
}
});
#wrapper {
position: relative;
}
#overlay2 {
position: fixed;
top: calc(100% - 50px);
background-color: #ddd;
transition: top 300ms;
}
#trigger2 {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
background-color: #eee;
}
.arrow {
display: inline-block;
padding: 3px;
border: solid black;
border-width: 0 3px 3px 0;
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<div id="wrapper">
<div id="overlay2">
<div id="trigger2"><i class="arrow up"></i></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
Related
I'm stuck at my one-pager navigation logic. As you can see in my detailed example below, I already have a dynamic navigation depending on the scroll position. Also, when you click a navigation item, you are getting scrolled down to the specific section.
What I'm stuck at is the point to add/remove the active class to the navigation item. Somehow, I can't find a logic in my brain to make this a smart part of my navigation. I know that I can make some static JS code, but that's not what I want.
At least, I just want to add another menu item and an element containing the data-waypoint attribute.
It's not an option to add this to the item click functionality, since the user can scroll down manually, which then don't get recognized!
(function($) {
$(document).ready(function() {
let nav = $('#nav');
let navOffsetTop = nav.offset().top;
$(window).scroll(function() {
if ($(this).scrollTop() >= navOffsetTop) {
nav.addClass('sticky');
} else {
nav.removeClass('sticky');
}
// Somehow add logic here for changing active classes...
if ($(this).scrollTop() >= $('#content').offset().top) {
//console.log('Reached');
}
});
$('.nav-item').click(function() {
let navPosition = nav.css('position');
let navOuterHeight = nav.outerHeight();
let scrollTo = $(this).data('scroll-to');
let scrollTop = $(`[data-waypoint=${scrollTo}]`).offset().top - navOuterHeight - 15;
if (navPosition === 'static') {
scrollTop = scrollTop - navOuterHeight - 30;
}
$([document.documentElement, document.body]).animate({
scrollTop: scrollTop
}, 500);
});
});
})(jQuery);
#page {
width: 100%;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
border: 1px solid;
}
#container {
width: 100%;
height: 1500px;
}
#nav {
width: 100%;
background-color: #aaa;
margin-bottom: 30px;
z-index: 1;
display: flex;
justify-content: space-between;
}
#nav .nav-item {
padding: 20px;
display: flex;
justify-content: center;
flex: 1;
cursor: pointer;
}
#nav .nav-item.active {
color: #fff;
}
#nav.sticky {
position: fixed;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page">
<h1>Lorem Impsum page</h1>
<div id="nav">
<div class="nav-item active" data-scroll-to="home">Home</div>
<div class="nav-item" data-scroll-to="content">Content</div>
<div class="nav-item" data-scroll-to="about">About</div>
</div>
<div id="container">
<div id="home" data-waypoint="home">
<h2>Home</h2>
<div class="inner">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div id="content" data-waypoint="content">
<h2>Content</h2>
<div class="inner">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div id="about" data-waypoint="about">
<h2>About</h2>
<div class="inner">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
I'm happy to share my answer I've found. I was first looking for a simple solution, but ended up using Waypoints jQuery library.
This is my solution. I hope it helps someone:
(function($) {
$(document).ready(function() {
let nav = $('#nav');
let navOffsetTop = nav.offset().top;
let navItem = $('.nav-item', nav);
$(window).on('resize, scroll', function() {
initNav(nav, navOffsetTop);
initWaypoints(nav, navItem);
});
$(window).resize(function() {
setNavHeight(nav);
});
navItem.click(function() {
let navOuterHeight = nav.outerHeight();
let scrollTo = $(this).data('scroll-to');
let scrollTop = $(`[data-waypoint=${scrollTo}]`).offset().top - navOuterHeight - 10;
$([document.documentElement, document.body]).animate({
scrollTop: scrollTop
}, 500);
});
setNavHeight(nav);
initNav(nav);
});
function setNavHeight(nav) {
let navItems = $('#nav-items', nav);
nav.css('min-height', `${navItems.outerHeight()}px`);
}
function initNav(nav, navOffsetTop) {
let navItems = $('#nav-items', nav);
let windowScrollTop = $(window).scrollTop();
if (windowScrollTop >= navOffsetTop) {
navItems.addClass('sticky');
} else {
navItems.removeClass('sticky');
}
}
function initWaypoints(nav, navItem) {
$('.block-waypoint').waypoint(function() {
let waypoint = $(this.element).data('waypoint');
let navItemWaypoint = $(`.nav-item[data-scroll-to=${waypoint}]`, nav);
navItem.removeClass('is-active');
if (navItemWaypoint.length) {
navItemWaypoint.addClass('is-active');
}
}, {
offset: 69
});
}
})(jQuery);
#page {
width: 100%;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
border: 1px solid;
}
#container {
width: 100%;
height: 1500px;
}
#nav {
margin-bottom: 30px;
}
#nav-items {
width: 100%;
background-color: #aaa;
margin-bottom: 30px;
z-index: 1;
display: flex;
justify-content: space-between;
}
#nav-items.sticky {
position: fixed;
top: 0;
left: 0;
}
.nav-item {
padding: 20px;
display: flex;
justify-content: center;
flex: 1;
cursor: pointer;
}
.nav-item.is-active {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div id="page">
<h1>Lorem Impsum page</h1>
<div id="nav">
<div id="nav-items">
<div class="nav-item is-active" data-scroll-to="home">Home</div>
<div class="nav-item" data-scroll-to="content">Content</div>
<div class="nav-item" data-scroll-to="about">About</div>
</div>
</div>
<div id="container">
<div id="home" class="block-waypoint" data-waypoint="home">
<h2>Home</h2>
<div class="inner">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div id="content" class="block-waypoint" data-waypoint="content">
<h2>Content</h2>
<div class="inner">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div id="about" class="block-waypoint" data-waypoint="about">
<h2>About</h2>
<div class="inner">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
Also, I've wrapped the nav items into a wrapper and set the margin to the outer nav. During page init and resize, I'm setting a min-width to the outer nav to prevent any content jumping and issues with the waypoints. Otherwise, the offset and all the other calculation stuff makes a lot of problems.
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
How to keep indent for second line in ordered lists via CSS?
(14 answers)
Get second line of bullet item to indent as first part - not underneath the bullet?
(2 answers)
Closed 1 year ago.
p::before {
content: "1. ";
}
p {
width: 200px;
}
<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
How can I let the line breaks begin more on the right, so that the pseudo element doesnt have any text under it?
Flexbox can fix that.
p::before {
content: "1. ";
}
p {
width: 200px;
display: flex;
}
<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Alternatively, use CSS-Tables
p::before {
content: "1. ";
display: table-cell;
padding:.25em;
}
p {
width: 200px;
display: table-row;
}
span {
color: red
}
<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span>INTERCEDING SPAN</span> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Set display: flex or display: inline-flex on your p element.
However, I would suggest using standard ul li for such purpose instead of pseudo elements.
My Goal
I want to use a good-looking scrollbar that i found on this website Bootstrap Scrollbar.
My Problem
However i am struggeling with the logic behind it.
Since a scrollbar is added automatically, where in the HTML do i have to locate the bootstrap-scrollbar-div ?
If I have for example 2 separate div-containers and I want in each of them to follow a certain scrollbar-color, how do i achieve it ?
Do i have to warp my 2 div-containers each within the bootstrap-scrollbar ?
Note:
If anything is unclear or if I formulated my question to unprecisely, leave a comment.
In the following code, the bootstrap is not working, this is the reason why i am asking this question.
The Code-Snipped
.scrollbar-morpheus-den::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
.scrollbar-morpheus-den::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.scrollbar-morpheus-den {
scrollbar-color: #330867 #F5F5F5;
}
<!doctype html>
<html lang="de">
<head>
</head>
<body>
<div class="scrollbar scrollbar-lady-lips">
<div class="force-overflow"></div>
</div>
<div class="test2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
</html>
What if add class scrollbar-morpheus-den to <div> tag?
e.g. <div class="test2 scrollbar-morpheus-den">
I have added the height: 100px; and overflow: auto; to class .test so that overflow happens with the content available.
.scrollbar-morpheus-den::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
.scrollbar-morpheus-den::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.scrollbar-morpheus-den {
scrollbar-color: #330867 #F5F5F5;
}
.test2 {
height: 100px;
overflow: auto;
}
<!doctype html>
<html lang="de">
<head>
</head>
<body>
<div class="scrollbar scrollbar-lady-lips">
<div class="force-overflow"></div>
</div>
<div class="test2 scrollbar-morpheus-den">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
</html>
I want to add some functionality on an html element, when I scroll down on that element.
var El = document.getElementbyId("info");
El.addEventListener("scroll", function() {
El.style.background="red";
})
I want to use that event on an element, not on document or window object.
your selector 'getElementbyId' is wrong, the 'b' needs to be a capital
Ive added some content so have a viable demo case
document.getElementById('info').addEventListener(
'scroll',
function()
{
document.getElementById('info').style.background="red";
},
false
)
#info{
height:200px;
width:200px;
background-color:yellow;
overflow:scroll;
}
<div id="info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
I got a problem with my code below. I want a div element, that appears on clicking on a + sign and disappears when clicking on a x sign. The disappearing part i could figure out. But somehow the appear part doesn't work.
Can someone help me with this problem?
.button {
cursor: pointer;
}
<span onclick="element.querySelector('.more').style.display = 'block';" class="button">+
<div id="more">
<span onclick="this.parentElement.style.display = 'none';" class="button">×
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
edit:
Unfortunately the suggested this.querySelector('#more').style.display = 'block'"; is not working. How can I access the #more id that is NEXT to the button and not the first one in the code?
Description
span needs to be closed <span>stuff</span>
When running querySelector you need to use # for IDs and . for CSS classes. Running querySelector needs an element to be run on: this, document are two examples.
.button {
cursor: pointer;
}
// need to select by ID #, search the document, close the span
<span onclick="document.querySelector('#more').style.display = 'block';" class="button">+</span>
<div id="more">
// close the span
<span onclick="this.parentElement.style.display = 'none';" class="button">×</span>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
Example using Class, also hiding the plus more intelligently
.button {
cursor: pointer;
}
<div class="wrapper">
<span onclick="this.parentElement.querySelector('.more').style.display = 'block'; this.style.display = 'none';" class="button" style="display: none">+</span>
<div class="more">
<span onclick="this.parentElement.style.display = 'none'; this.parentElement.parentElement.querySelector('span').style.display = 'block';" class="button">×</span>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>