I have two vertical Scrollbars, which are placed parallely to each other. The thing is that I'm trying to implement a lazy load to my web page, but it isn't behaving as expected.
I want to fire the lazy load event only when the inner scrollbar is actuated, actually it's being fired when the outer scrollbar is actuated.
I'll post below a code snippet (extracted from internet, not the real one) that behave a bit as I mentioned before. Let's imagine I want to display the scrollbar coords only when the inner scroll is actuated. I hope I have explained myself well
window.addEventListener('scroll', () => console.log(scrollY))
html{height:5000px}
You can use the scrollTop property on the element that has the scroll.
Having said that, I would like to mention the Intersection Observer API that monitors elements (that you specify) and fire an event when an element intersects another element (ie. when an element enters the viewport for example). It is more performant and you have better control over what should happen and when it should happen.
const inner = document.getElementById("inner");
inner.addEventListener("scroll", event => console.log(inner.scrollTop));
body {
height: 5000px;
}
.inner {
height: 250px;
width: 250px;
margin-inline: auto;
margin-top: 25vh;
overflow-y: scroll;
}
<div id="inner" class="inner">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quasi labore veniam blanditiis perferendis ex repellendus. Consectetur error veritatis maxime ut quisquam odio iste fugiat, vel, dicta iure vero mollitia? Doloribus consequuntur eos
veritatis sunt corrupti maiores alias perferendis asperiores consequatur, illo, minus aut esse placeat quam itaque quos inventore ipsa eum aperiam? Optio, labore perspiciatis! Possimus sed ipsum suscipit vel perferendis porro quaerat consequuntur.
Totam quibusdam sit quas quae delectus doloremque consequatur minima? Adipisci facere quam ipsum ex sed alias molestiae temporibus! Voluptatum cum quae molestiae, ut fuga sint atque nam placeat dolores tenetur. Doloribus odit placeat ea corrupti!
</p>
</div>
Related
I am currently encountering a requirement. I hope that the text can be limited to two lines and the ellipsis must appear~ At present, I can use the following CSS method to complete it, but it seems that the compatibility is not very good. It will only work in chrome. If you use other browsers, it will work. invalidated. So I would like to ask everyone, how should we usually do this in a formal way? At the same time, it is compatible with all major browsers. Thank you for watching my question.
p {
width: 300px;
font-size: 14px;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, tempora, suscipit explicabo quos iure eveniet eaque veritatis perspiciatis ullam quibusdam amet. Debitis magni dignissimos cupiditate deleniti, eligendi expedita at eos vel tempora deserunt
iure delectus numquam et odio minus a natus excepturi odit magnam labore? Autem accusamus voluptates alias? Qui maxime itaque voluptate velit vero sit temporibus aliquid! Veritatis nesciunt quos mollitia ipsa eum enim sunt hic aut qui odio ex, rerum
fuga deleniti adipisci cumque, reprehenderit nihil pariatur quis officia voluptates. Dolorem sit, sequi veritatis obcaecati ratione dolore explicabo? Eum possimus voluptates pariatur similique eveniet repellendus, recusandae nihil quas!</p>
Try this using max-height property. and if content is greater than the max height you can add ellipsis using jquery and css.
p {max-height:32px;}
Try this fiddle,
JSFIDDLE
EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slideshow div fixed it.
ORIGINAL POST
I have a webpage with an image slideshow. The slideshow is set to run every 5 seconds using setInterval and calling the below function:
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
The animation keyframe:
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
The structure of the page is:
Header
Slideshow
Other Content
The header "position: sticky", so it should always be visible.
The Problem: On mobile or responsive mode on browser dev tool, when I scroll down while the animation is running, the header is not visible, i.e it is ignoring the "position: sticky" css rule. Once the animation completes, the page resets the scroll position back to the top.
It works as expected on desktop, i.e the header is always visible at the top of the screen and the scroll position does not get reset.
I am still learning and I don't understand what is causing the issue and why only on mobile? Tried google but no luck, mostly because I am not sure what to search for.
EDIT:
Recreated the problem as per the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slideshow</title>
<style>
body {
min-height: 100%;
font-family: Helvetica,
Arial,
sans-serif;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preload * {
animation: none !important;
}
img {
max-width: 100%;
height: auto;
}
.main__overlay {
z-index: 200;
}
.image-slider__overlay {
z-index: 1000;
}
.header {
z-index: 2000;
}
.header {
text-transform: uppercase;
padding: var(--size1) var(--size0);
opacity: 0.9;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.image-slider {
position: relative;
}
.image-slider__img {
position: absolute;
top: 0;
left: 0;
animation-name: slide;
animation-duration: 3s;
}
.no-slide {
aspect-ratio: attr(width) / attr(height);
}
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
</style>
</head>
<body>
<body class="preload">
<header class="header">
<h1 class="header__logo">Earthen Karkhana</h1>
</header>
<div class="image-slider">
<div class="no-slide">
This div will be an image is the actual code. Image 1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 2
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 3
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 4
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
</div>
<section class="projects__main">
<h2 class="projects-link--heading body_text">
Projects
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit inventore
repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
Autem reiciendis fugit quis, perspiciatis nihil sit aliquam impedit dicta placeat veritatis culpa voluptate nisi
aut consectetur unde, alias et fugiat quisquam dolor distinctio eos dolore non error! Id, optio.
Omnis excepturi delectus inventore ullam harum accusamus sed consequatur autem quo obcaecati mollitia corrupti
amet, eaque veritatis, sit dolorum voluptates id atque rem, ipsam officia? Architecto magni dignissimos sint
dolorem!
Doloremque enim nobis eum esse nihil. Fugiat nesciunt obcaecati omnis. Doloribus harum deserunt sapiente omnis
quasi aut voluptatum consequatur perferendis, tempora nulla blanditiis labore vitae provident repellendus,
eveniet sit quas.
Nemo, quos perspiciatis modi repudiandae delectus doloremque. Vero dolores blanditiis itaque consequatur minus
distinctio, sapiente corporis, suscipit ratione tenetur animi sit eius quod dolorem nobis sed pariatur tempora
natus ea.
Quam sequi distinctio adipisci dolor? Asperiores exercitationem eveniet eum architecto voluptates, tempore saepe
sint eius quisquam odit veritatis debitis eligendi ab impedit, officia nam! Libero tenetur ad consequuntur eos
natus.
Corporis pariatur eius velit ad sequi facere impedit quia laboriosam quos? Eum, labore minima temporibus placeat
sunt totam neque, quod harum facilis reiciendis doloribus aliquid dolor saepe distinctio expedita sint.
Repellat, ipsam! Omnis nihil maiores amet excepturi velit, deleniti minus voluptatibus quasi vel, magni aperiam
veritatis non asperiores, nisi dolorum hic eligendi ipsa? Omnis id esse hic non sed est!
Qui accusantium dignissimos natus corporis asperiores, perferendis eveniet ab et, consequuntur vitae officiis
nulla consequatur obcaecati magni corrupti nihil neque nam iste quidem! Libero eos est, beatae error praesentium
eligendi!
</p>
</section>
<script>
"use strict";
const slideImages = Array.from(document.querySelectorAll(".image-slider__img"));
// Wait for page to load before starting slideshow
window.addEventListener('load', (e) => {
document.querySelector("body").classList.remove("preload");
// slideshow should only run on index page
if (document.querySelectorAll(".image-slider__img").length == 0) return;
// Static image not required to be visible once slide images are loaded in
setTimeout(() => document.querySelector(".no-slide").style.opacity = 0, 8000);
slideShow();
});
function slideShow() {
slideImages.forEach((img, index) => {
img.style.display = "none";
});
console.log(slideImages);
let animationInterval = setInterval(startSlideShow, 5000);
}
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
function removePreviousImage(img) {
setTimeout(function () { img.style.display = "none" }, 3000);
}
</script>
</body>
</html>
If viewed in responsive mode in dev tools the page layout changes when the animation is running, but that does not happen on desktop mode.
In desktop mode, resizing the browser to match width of a mobile device does not trigger the problem.
I guess your browser doesnt support position : sticky; try to use another browsers like chrome .
and I highly recommend You better to use "browser-prefixes" .
You can read about "browser-prefixes" in :
https://www.thoughtco.com/css-vendor-prefixes-3466867
I have this problem that I can't solve. Basically, I want to do this: my problem
This is a screenshot of me putting the <img> into the p tags, but I am not happy with that solution. For example - What if I don't know the number of lines in my paragraph and I still want to centre the image ...
I tried solving this in css:
.container {display:flex; justify-content:flex-end}
.item {align-self: center}
This doesn't work because the container is also affecting the p element ...
So why don't I just put the img into another div? Well, this doesn't work either...
.img_container {display: flex; justify-content:flex-end; width:100%;}
.item {align-self: center;}
This doesn't work, because of the width of the img_container is affecting the p also and If I don't make the width:100%; than the div is useless and the img will not be at the right side as I wanted it to be ...
I found a lot of "wrapping text around an image" questions and answers that are pointed me to css align property, but I am using html5 and this does not work for me.
I also want to point out that I am not from an English speaking country so searching for topics is hard for me if I don't know the exact name of the topic. So if there is an entire thing based around this topic than please point me into direction of it and I will be happy to read it.
SOLUTION: I solved it with the shape-outside thing, but rather than calculating background I just added an img tag to the div ... it ended like this
img {position: absolute; top:100px;}
Here is an idea using shape-outside but you need to pay attention to browser support:
body {
max-width:600px;
}
p {
text-align:justify;
}
div {
shape-outside: inset(50px 0px 50px 0px);
background: url(https://lorempixel.com/400/200/) 5px 50px/100% calc(100% - 100px) no-repeat;
width: 200px;
height: 200px;
float: right;
}
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore m fuga labore dolores, autem blanditiis, dolorem error ex enim fugiat quisquam aut reprehenderit deleeriores unde? Tempora dolorem, ad quidem quis adipisci dolores tempore</p>
From your screenshot, which you want to design, I think you had not use the flex property. Instead, you can use simple float: right for img. This floating img will wrapped by paragraph text. I will be happy if this is help you.
I have a two column website, however the user must focus in on the right column to scroll the main content. If the user is focused on the left-hand link bar nothing happens. I tried coding a script that will scroll the right column no matter where the user's mouse is. It does not feel natural and barely scrolls.
Here is my attempt: https://jsfiddle.net/knfg9Lqp/4/
Here is my website(scroll only works on right div): maxmastalerz.com
How could I go about making it non-laggy and fluid with the right amount of scroll?
I could probably use a plugin, however I'm leaning away from that idea.
$(document).bind('mousewheel', function(e){
var delta = (e.originalEvent.wheelDelta/120)*3;
var y = $('#right').scrollTop(); //your current y position on the page
$('#right').scrollTop(y-delta);
});
#left {
background-color: gray;
float: left;
width: 30%;
height: 150px;
}
#right {
background-color: aqua;
float: left;
width: 70%;
height: 150px;
overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="left">
Link 1
Link 2
Link 3
</div>
<div id="right">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
TRY SCROLLING UP AND DOWN USING YOUR MOUSEWHEEL OR TOUCHPAD
Why are you dividing and multiplying? If you simply use var delta = e.originalEvent.wheelDelta; the scrolling looks right
https://jsfiddle.net/knfg9Lqp/5/
See the Facebook comment modal box in the below. I'm trying to achieve a similar effect whereby a user clicks on a button and then it opens up a popup/modal box. This box will allow scroll within the new box (as it could be many pages of text), but will disallow scrolling outside of the modal on the main page. How do I achieve a similar effect where the modal allows scrolling within the modal window but not elsewhere? Thanks.
Usually this works by doing the following:
Adding height:100% to body and html tags.
Adding overflow: hidden to body when the modal is showing.
Basic Demo: jsFiddle
$("body").on("click", function(){
$("body").toggleClass("modalview");
})
html, body {background:#666; color:#FFF; margin: 0; padding: 0; height:100%;}
#content {
padding:1em;
width:90%;
margin:0 auto;
}
#modal {
/* hidden by default */
display: none;
/* box */
width:75%;
height:75%;
padding:1em;
position: fixed; z-index:1;
overflow: auto;
/* center modal vertically and horizontally */
left: 50%; top: 50%;
transform: translate(-50%,-50%);
/* style */
text-align: center;
background:#FFF;
box-shadow:1px 1px 15px #000;
color:#000;
}
/* prevent page scrollbars in modal view */
body.modalview { overflow:hidden; }
/* show #modal in modal view */
body.modalview #modal { display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="modal">
<p>All UR SCROLLS ARE BELONG TO US!!!</p>
<p>Et velit odit cumque hic, aspernatur. Perferendis assumenda est necessitatibus cupiditate cum odit deleniti doloribus earum veniam dolores, neque laudantium laboriosam optio numquam autem iure animi ipsa dolor fugit blanditiis?</p>
<p>Unde quidem sunt quos itaque minus, quia modi nisi temporibus. Consectetur natus perferendis possimus, rem, sed tempora cumque dolorum quod provident blanditiis eum ipsam voluptate dolor, harum doloremque id amet.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda quas, rem voluptas et, totam officia quos, quaerat doloribus eaque odio aperiam a obcaecati explicabo quod eveniet eum aliquid! Repellat.</p>
<p>Vitae ipsum explicabo voluptatibus corrupti odio ipsa, tenetur modi veritatis excepturi architecto nam dignissimos ratione. Iusto temporibus ipsum cupiditate excepturi modi eos alias dolores eveniet possimus. Alias, esse error quam!</p>
<p>Ea numquam quae laborum ut vitae molestias dolorum fugit, asperiores aliquid voluptates vero ab consequuntur ipsum maxime obcaecati temporibus voluptate sed quaerat, necessitatibus deleniti. Quibusdam iste saepe inventore amet eius.</p>
<p>Aut veritatis quos quaerat, placeat nam est ad tempora delectus magnam molestiae, ipsum cupiditate debitis illum perferendis ut nisi beatae voluptas provident consectetur inventore assumenda eveniet? Molestiae architecto ullam nulla.</p>
<p>Explicabo, debitis? Mollitia reiciendis sint minus adipisci, consectetur consequatur assumenda blanditiis pariatur ex facilis expedita et earum molestiae quos, laborum sed suscipit doloribus placeat ipsam in vero quaerat aliquid iure!</p>
<p>Earum dolorem eveniet laboriosam vel dolor! Ullam nisi adipisci voluptatem, voluptatum tenetur, itaque ducimus laboriosam repudiandae quibusdam numquam dignissimos aperiam praesentium culpa porro sapiente ab eos magni? Maiores, doloremque, aspernatur.</p>
</div>
In my approach, I used a CSS class for body to toggle the overflow state. When body gets the class (.modalview) it will hide content below the fold and remove scrollbars from page while showing the actual modal.
jQuery is used to apply the class to body and show #modal through a on click function.
For demonstration sake, I made the #modal show up when you just click on the page, you can bind the function to a button click, like so:
$("#myButton").on("click", function(){
$("body").toggleClass("modalview");
})
To see this properly, load up the jsFiddle demo and play with the page width to see how the scrolling is changed.