For instance I have a page of 5 blocks:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
Each block is 100% width and height of a window, the red one(1) is visible.
.div1, .div2, .div3, .div4, .div5 {
width: 100%;
height: 100%;
}
I want to navigate throgh those blocks using mouse wheel. When i scroll down the second block animates from bottom, a little more down the third one animates. And I don't want scroll bar to be visible.
I know I should use jquery mousewheel plugin and choose an action depends on delta. But don't see the whole situation.
I hope my question is clear. Would appreciate any help and websites who already implemented such kind of naviation to dig in it.
You should be using jquery scroll event as shown here
$('#target').scroll(function() {
//code goes here
})
also you can hide scrollbar as shown here
or you can try infinite scroll plugins.
First of all, each of your blocks should have "position: fixed". The first block would have top: 0px; bottom 0px; left 0px; right 0px; While for the block below that, left and right are still 0, but top and bottom are now offset by the height of your window (you can get the height of your window with $(window).innerHeight(); And so on and so forth with the other blocks.
Then whenever the user is scrolling (using the scroll events already given in other answers) you simply modify the top and bottom (equally) of all your blocks by however much you want each time the event fires.
Cheers
Related
I am trying to make this parallax effect where when you scroll down, the image follows to the next location, then stops at said location(or destination). Once it reaches its destination, I want it to stay there and as you continue to scroll down, The image cannot continue past the destination set on it and I want it to scroll off the window, not stick at the top. Although I feel like this would be a fairly basic parallax task, unfortunately I am new to parallax.
<div class="myimg">
<img src="https://i.imgur.com/pzhXqfp.png" class="self" onclick="scrollWin()">
</div>
function scrollWin() {
window.scrollTo(0,1);
}
on scrollTo, on the Y axis, I have tried 0, 1, 50, 100, 500, and all kinds of numbers, but even at the lower numbers, it will scroll the entire page.
Edit: I found a perfect example: https://www.apple.com/ph/shop/buy-ipad/ipad-mini .
I would like to replicate this exact thing with the iPad. It scrolls down to a certain point on the Y axis and once it hits its destination, it no longer moves down the page. I have also tried the following, which is something I found from another Stack Overflow question, but this one is sticking to to top, which is not exactly what I'm looking for. Close though!
$(window).scroll(function() {
$(".myimg").css("top",Math.max(0,250-$(this).scrollTop()));
});
In the example website (https://www.apple.com/ph/shop/buy-ipad/ipad-mini) that you provided it is not a parallax effect but a sticky element in which it sticks to the screen at a given position until it reaches the end of its parent's height.
To create this effect just write the following .html and .css code:
body {
padding-top: 50vh;
padding-bottom: 200vh;
}
.parent {
height: 100vh;
}
.sticky-box {
background-color: blue;
width: 500px;
height: 500px;
position: sticky;
top: 0;
}
<div class="parent">
<div class="sticky-box"></div>
</div>
We define a div element with position: sticky with top: 0 for it to stick in top of the screen. Notice: The sticky-box travels the full height of the parent in the fixed position (so we define height: 100vh in the parent). More information in https://developer.mozilla.org/en-US/docs/Web/CSS/position.
Modern browsers seem to have a feature where the viewport sticks to bottom when page height increases. What actually happens is that browser scrolls the viewport at the same rate as height being increased when initial position is at (or very close to) the bottom of the page. This results in appearance as if page is expanding upwards instead of downwards.
How can this feature be disabled for a certain page using CSS or JS, so that the page would always visually expand downwards?
This of course, also happens when added element's height is expanded animated. For this reason, if possible, I would want to avoid resetting scroll position afterwards to prevent visible jump. The demo of this "feature" (that seems to happen only within rare conditions) interacting with the viewport and drop animation can be observed in the gif below.
I know there must be a way, otherwise every site with infinite scroll would suffer from an infinite loop. Counter argument: Chrome appears not to do this for containers that surpass certain height limit. So maybe infinite-scroll sites don't even bother addressing this in their sites.
Check this fiddle. You can observe that in Chrome, the first container snaps to the bottom, while the other divs has a scroll relative to the top. In Firefox or IE 11, you cannot observe this behavior.
This happens when the top bound of the last element on a scroll container is above the top bound of the container. The browser decides that the last element is what the user is interested in and decides to stay in that position.
The last div doesn't snap to the bottom because the scroll happens relative to the top bound of the last element and the last element is growing.
If you want a different behavior, I would not suggest handling it with Javascript, but I would suggest changing your layout considering these rules. For example the last div should be the growing one, instead of the previous siblings of it.
Obligatory code:
var div = document.querySelectorAll('.growing');
var height = 500;
setInterval(function(){
height += 100;
div[0].style.height = height + 'px';
div[1].style.height = height + 'px';
div[2].style.height = height + 'px';
},1000);
.start, .end{
height: 110px;
}
.start{
background: red;
}
.end{
background: green;
}
.growing{
background: yellow;
}
.cnt1,.cnt2,.cnt3{
overflow: auto;
border: 5px solid black;
margin: 5px 0;
scroll-snap-type: mandatory;
}
.cnt1{
height: 100px;
}
.cnt2{
height: 120px;
}
.cnt3{
height: 100px;
}
<div class="cnt1">
<div class="start"></div>
<div class="growing"></div>
<div class="end"></div>
</div>
<div class="cnt2">
<div class="start"></div>
<div class="growing"></div>
<div class="end"></div>
</div>
<div class="cnt3">
<div class="start"></div>
<div class="end"></div>
<div class="growing">
Content
</div>
</div>
Edit:
If the bounds of the growing div is in the visible area, the scroll is relative to the top of the growing div. So you can hack CSS to show the growing div, but actually not show it.
In this fiddle I have used two different CSS hacks. First one is adding a negative margin bottom and a positive padding bottom at same amount. The second hack is adding an :after element to the growing div but hide its visibility.
for click events, use blur, avoid scrollTo
It seems like this issue is focus-related. I came across a similar bug and when the element that triggered a height change was switched to an unfocusable element, like a div, the screen jumping disappeared. This clearly isn't a great solution because we should be able to use buttons! It also implicates focus in this strange behavior. Further experimentation led to blurring the trigger element before the height change, which solves the problem without moving the viewport. I've only tried this with click events so I'm not sure if it works for drag n drop.
codepen that showcases viewport jumping with accordions and a blur fix
function handleClick(e) {
e.currentTarget.blur();
// code to change height
}
Do you mean that when you scroll to the bottom, and a piece of content gets added, you stay at the bottom? Because the solution for that is real simple:
Option 1
Store the current scrolloffset to the top (eg how many px you've scrolled down)
Add new content
Set scrolloffset to the top to the stored value
Those last two steps can be done so fast that the user wont notice.
Option 2
Not 100% sure this works, but i'm guessing it does:
When the visitor scroll to the bottom, always scroll them back 3px. This way, they're not at the bottom at the point where new content gets added, so the browser stays where it is.
As per my understanding regarding your requirement, I have given a working jsfiddle sample.
Hope it would help to you.
If you expect something more, feel free to add comment.
Cool!
$(function(){
var height = 200;
var pos = 0;
setInterval(function(){
if($(document).height() >= $(window).height()){
var height = $('.container1').height();
$('.container1').height(height + 20);
pos = pos + 20;
$(window).scrollTop(pos);
}
}, 1000);
});
.container1 {
border: 1px solid #ccc;
min-height: 200px;
background: #ccc;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<p>11</p>
<p>12</p>
<p>13</p>
</div>
All of your draggable elements are in a container with no auto overflow, when you drag and drop your elements the whole page scrolls due to dragging.
Instead of that do as:
<div class="container">
<!-- Place all your draggable elements here -->
</div>
set a max-height and overflow of the container class as:
.container {
max-height: 400px;
overflow: auto;
}
Now when you drag and drop your elements, instead of the whole page, the only container will scroll.
After implementing this solution, it will look like this.
Before dragging.
While dragging.
Hope this helps you.
Take the following example:
https://jsfiddle.net/atg5m6ym/5079/
Here, you have to scroll down a bit to see the message "Hello!". I also animated a div to move down beyond the screen:
$("div").animate({top: '3000px'}, 6000);
You can see how the scrollbar changes and we now have a much larger page to scroll through.
Now, I want users to be able to scroll down to the "Hello!" text, if the text is beyond the user's screen. However, I don't want the div to extend the vertical scrollbar once it reaches the bottom of the screen. Rather, I want the div to continue moving down beyond the screen, with the scroll bar remaining unchanged. This way, the scrollbar could not follow it.
Doing "overflow-y: hidden" would prevent users from scrolling downwards on their own choice and reading the "Hello!" Is there anything I can do to accomplish both of these using JS (preferably jQuery) or CSS?
EDIT: I still want the div to exist, so I don't want to fade it out. If I had a div that returns afterward or travels in an elliptical orbit, I would like it to still reappear when it reenters the screen, but not to affect the scrollbar.
This will make div travel to whatever the Y position of the paragraph is, and after that gets faded out:
$(document).ready(function() {
var p_pos = $("p").offset().top;
$("div").animate({top: p_pos}, 6000).fadeOut();
});
Alright, try the following:
<div id="everything">
<div id="orb"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<p>
Hello!
</p>
</div>
And in your css:
#everything {
display: inline-block;
position: relative;
width: 100%;
height: 800px;
max-height: 800px;
overflow-y: hidden;
background-color: #ccc;
}
Make sure to animate $("#orb") instead of just $("div") (and rename it in your css.
There you go. Just add to the body and set the div position to
body {
overflow: hidden
}
div {
bottom: 0;
}
https://jsfiddle.net/atg5m6ym/5082/
I'm trying to synchronize the scrolling between two separate panels / divs.
One element has overflow: auto while the other has overflow: hidden (sort of trying to replicate a grid with frozen columns).
I can sync the scroll when the event happens within the element with overflow: auto but not the one with overflow: hidden (which is sort of normal if you ask me).
However, is there a workaround for this? I want to synchronize the scrolling both ways.
Here's a fiddle that will illustrate my issue (try scrolling in both panels): http://jsfiddle.net/0zzbkyqg/
Also, this thing seems to happen here already: http://demos.telerik.com/kendo-ui/grid/frozen-columns but I just can't understand how they're doing it.
Maybe you should make use of the wheel event which is triggered when you roll the mouse wheel, regardless of whether the section of the view has scrolled or not.
Demo
$("#panel-left > table").on('wheel', function (e) {
// your logic here
}
I'm thinking you don't need jQuery to do that.
Look here: http://jsfiddle.net/ty0jyr4y/
I've removed the position: absolute and overflow properties from the panels and added float: left to make them inline (could also use display: inline-block), and added height: 400px, width: 417px and overflow: auto to the container.
The container's width is set to 417px instead of 400px because the scroll bar takes 17 pixels of space (across all browsers according to here).
Works beautifully. Is this what you want?
When I shrink the width of my browser window (Firefox v26) so that only 1/2 of my home page is shown, the horizontal scrollbar appears on the bottom of the browser, which is fine.
But if I scroll the page to see its right half -- that right half is blank. In other words, after horizontally scrolling to the right (which moves the page's content leftward, obviously) -- the right side of the page does not redraw. It stays blank. Even if I hit the refresh on the browser URL bar.
I looked around and saw several posts. This one seemed to be exactly the same problem (only difference was, theirs involved the vertical scrollbar).
So I took the suggestion there -- which was to set my outermost content div (called wholePageDiv in the code below) and also my outerDiv to 'min-width: 100%" but this changed nothing.
Here's the very simple code:
<html>
<body>
<div id="wholePageDiv" class="wholePageDivForCentering">
<div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%;
display: inline-block; overflow: hidden">
(not shown: a bunch of divs with text)
</div>
</div>
</body>
<html>
Here is the wholePageDivForCentering CSS class, with the change made per that SO post I read:
.wholePageDivForCentering
{
/* width: 100%; */
min-width: 100%;
/* height: 100%; */
min-height: 100%;
white-space: nowrap;
margin: 0 auto;
}
I have looked at other websites to see if they exhibit the same "right side of scrolled page does not redraw" problem. On other websites I tested, I shrink the browser to 1/2 the width needed to show the whole page, then I scroll to see the right 1/2 of the page -- all other websites I check are successfully redrawing the right-side content as I scroll.
Do I have a CSS style problem above?
EDIT: I hit F12 in my browser and use the 'Inspector' tool and I clearly see that the only visible content is within the wholePageDiv and this div is not expanding at all, to the right, as I scroll to the right -- the Inspector shows that for whatever reason my outermost wholePageDiv is remaining the same fixed size as the viewport, and when I scroll to the right, this viewport outline as shown by the Inspector simply shifts leftward and does not expand on the right side to accommodate moving the scrollbar to the right.
I have added your html and css in a fiddle and it scrolls fine for me. The text of the div is displayed with no issues: http://jsfiddle.net/micahSan/UucLB/3/
same code as the OP
Can you replicate your problem in a fiddle so we can all see it?
I solved this (for now) by either hard-coding the div's width, or by programmatically increasing the div's width as the width of the browser window/document was changed. Hopefully will find a less kludgy solution later.