I would like to display indicators for a certain div to show that it can be scrolled right or left depending on its state. To do so I would need to know if element can be scrolled to respective positions, e.g. if there is content to be seen on the right show indicator and after scrolling show another indicator on the left to indicate that users can now scroll there as well. I have a simple setup like this one: https://jsfiddle.net/udv8u596/
(You can scroll horizontally, scrollbar is hidden intentionally)
HTML:
<div class="scroll-container">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
CSS:
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
height: 36px;
}
.scroll-content {
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
To check if an element is overflowing along the x-axis, you can simply compare its computed width, accessible via jQuery's .width() method, and its scrollWidth, a native JS function:
var $ele = $('.scroll-content'),
overflowing = $ele[0].scrollWidth > $ele.width();
You can then check the boolean value of overflowing if the element is overflowing or not. However, note that if you want this variable to be updated if the window resizes, a little more work has to be done:
var $ele = $('.scroll-content'),
overflowing = function() {
if($ele[0].scrollWidth > $ele.width()) {
return true;
} else {
return false;
}
};
console.log(overflowing());
$(window).resize(function() {
console.log(overflowing());
});
Here's a fiddle with the above logic implemented, with some slight modifications: https://jsfiddle.net/teddyrised/udv8u596/5/
Ilya basically you need to check your element right postion. On way of achieving this is to set the inner element to have absolute oistion and get right postion with jQuery
parseInt($('.scroll-content').css('right')) >= 0
I have modified you code as: https://jsfiddle.net/udv8u596/4/
In this example before animating the element it checks if the righ position is bigger than 0.
Please not that righ position is calculated based on the parent element. Left position is set to be 0 in the css but righ postion will be calculated in this example is ~-250.
I hope this gives you an idea how to solve your problem.
Here's a quick start for what you are looking for :
HTML
<div class="scroll-container">
<div class="mask">
<div class="scroll-content">
Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally
</div>
</div>
</div>
<div class="scrollRight">Scroll Right »</div>
<div class="scrollLeft">» Scroll Left </div>
CSS
.scroll-container {
width: 80%;
margin: 0 auto;
background: cyan;
overflow-y: hidden;
overflow-x: hidden;
height: 36px;
}
.mask{
position:relative;
overflow-x: hidden;
overflow-y: hidden;
height: 36px;
width: 100%;
}
.scroll-content {
position:absolute;
padding: 10px 0;
height: 50px;
white-space: nowrap;
overflow-x: visible;
width:auto;
}
.scrollRight, .scrollLeft{
font-size:10px;
display:none;
}
JS
var contentWidth = $(".scroll-content").width();
var containerWidth = $(".scroll-container").width();
if(contentWidth>containerWidth){
$(".scrollRight").show();
}
$("body").on("click", ".scrollRight", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"-"+scrollValue+"px"});
$(".scrollRight").hide();
$(".scrollLeft").show();
})
$("body").on("click", ".scrollLeft", function(){
var scrollValue = contentWidth-containerWidth;
$(".scroll-content").animate({"margin-left":"0px"});
$(".scrollRight").show();
$(".scrollLeft").hide();
})
See Update JSFiddle
Related
I'm trying to replicate this overlay phone effect from this website:
https://www.beemit.com.au/
Basically, when you scroll down, the contents inside the fixed div (phone) also change.
I cannot grasp my head around the revealing effect created when you scroll down. I have only managed to create the fixed div and the various sections on the webpage.
Here's a simple version of the overlay-on-scroll.
There are 3 elements, the first image you want to be shown in the 'phone', the second image which gradually gets revealed and the footer element. They have different z-indexes so footer is behind both first and second and second is behind first.
The phone has a fixed position so it doesn't move on scrolling. The footer is placed relative to the body (or whatever container you have) just out of view at 100%.
We introduce a simple event listener on scrolling which tests whether there is an overlap between the footer and the phone. If there is then we set the height of the first image element to be its original height minus the overlap. This reveals the bottom part of the second element.
Without seeing your code I can't tell whether you need more sophistication (for example, you have to be aware of stacking contexts if your phone and footer are not in the same one).
const footer = document.querySelector('.footer');
const first = document.querySelector('.first');
const firstBottom = first.getBoundingClientRect().bottom;
const firstHeight = firstBottom - first.getBoundingClientRect().top;
function checkOverlay() {
const top = footer.getBoundingClientRect().top;
if ( top < firstBottom) {
first.style.height = firstHeight - firstBottom + top + 'px';
}
}
body {
width:100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.first, .second {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid black;
width: 20vmin;
height: 30vmin;
overflow:hidden;
}
.first {
background-image: linear-gradient(magenta, pink);
z-index: 0;
}
.second {
background-image: linear-gradient(cyan, lime);
z-index: -1;
}
.footer {
width: 100%;
height: 50%;
background-image: linear-gradient(red,blue);
position: relative;
top: 100%;
z-index: -2;
}
<body onscroll="checkOverlay();">
<div class="first"></div>
<div class="second"></div>
<div class="footer"></div>
</body>
Im pretty new to html/css and currently trying to make an horizontal draggable slider for an Smartphone-Webapp.
Basically want i am searching for are three divs in a horizontal line, where div 1 and 3 are out of view.
If im dragging div 2 to left or right, 1 or 3 should appear.
Im creating my app with react and got already the div 2 to be draggable via an library.
First, make a parent div and add three divs to it. Stack the divs next to each other and for parent div add overflow-x: scroll. Each child should have a width and height to that of the screen. For that add min-width: 100vw; and min-height: 100vh;.
Now, to display the central div, the scrollbar of the div has to be moved.
parent.scrollLeft += document.querySelector(".C1").clientWidth;
This will position the scrollbar to the center. Essentially, it will move the scroll bar by the width of the screen.
Scroll down when you run the snippet to see the horizontal scrollbar.
var parent = document.getElementById("Parent");
parent.scrollLeft += document.querySelector(".C1").clientWidth;
* {
margin: 0px;
padding: 0px;
}
#Parent {
overflow-x: scroll;
display: flex;
}
.C1, .C2, .C3 {
min-width: 100vw;
min-height: 100vh;
}
.C1 {
background-color: red;
}
.C2 {
background-color: green;
}
.C3 {
background-color: blue;
}
<div id="Parent">
<div class="C1">
</div>
<div class="C2">
</div>
<div class="C3">
</div>
</div>
What do i want to achive?
I want to remove a div which isnt visible(for the user not the css atribute) anymore on the screen because i let the html and body scroll to a div with jquery(scrollTop). Now i want to remove the div which was visible beforr i scrolled down with jquery.
Edit: After removing the .header div, the #begining should be the top of the page and the .header div should be removed forever.
What is the problem?
After i scrolled down and removed the div with the following line of code: $('.header').css('display','none'); the scroll position changes.
Code to scroll down and remove the div.
function scrollToBegining(){
$('html, body').animate({
scrollTop: $("#begining").offset().top
}, 750);
setTimeout(function(){
$('.header').css('display','none');
},750);
}
Problem visualized:
GIF of the problem (Watch to understand better)
This is odd, but I think a better choice is to slideUp the div instead of scrolling:
function scrollToBegining(){
$('.header').slideUp(750);
}
Obviously, rename the function since it's no longer scrolling.
You can use visibility: hidden to hide the div but reserve its space. Also, sometimes the scroll position has to be changed when you use display: none.
visibility: hidden
is what you are looking for, but another solution I use with this kind of issue is instead of scrolling down to your second div, have the initial div shrink its height in a uniform animation until it is 0. This prevents the weird shuddering scroll issue you are experiencing
document.querySelector('#header h1').addEventListener('click', closeHeader)
function closeHeader(){
document.querySelector('#header').classList.add("hidden");
}
#header {
height: 300px;
width: 100%;
background: red;
text-align: center;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
text-align: center;
}
.hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
<div id="header">
<h1>
HEADER
</h1>
</div>
<div id="content">
CONTENT
</div>
I accidentally discovered that scrollTop, and scrollLeft on an element work even when an element is overflow: hidden. Can this behaviour be relied on?
Supposedly scrollTop, and scrollLeft are supposed to be zero for elements without scrollbars, and setting them on such elements is supposed to have no effect.
Yes, even if an element has CSS overflow set to hidden,
Javascript Element.scrollTop(), Element.scrollLeft() allows you to manipulate the element's scroll position if the element contains overflowing children.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
Here's a quick use case:
Animate gallery using scrollLeft
var GAL = $("#gal"),
n = GAL.find(">*").length;
c = 0;
$("button").on("click", function(){
GAL.animate({ scrollLeft: (++c%n) * GAL.width() });
});
#gal {
height: 40vh;
overflow: hidden; /* !! */
white-space:nowrap;
font-size: 0;
} #gal>* {
font-size: 1rem;
display: inline-block;
vertical-align: top;
width: 100%;
height: inherit;
background: 50% / cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gal">
<div style="background-image:url(//placehold.it/800x600/cf5);"></div>
<div style="background-image:url(//placehold.it/800x600/f0f);"></div>
<div style="background-image:url(//placehold.it/800x600/444);"></div>
</div>
<button>scrollLeft</button>
Not sure yet why Chrome does not do the following but:
Firefox will remember your gallery scroll-position on historyBack (navigating back to the page where you scrolled your gallery)
I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}