Develop Reference

How do I make image stop at a certain point from a fixed location. (Example link provided)

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.

Prevent browser viewport from sticking to bottom when page height increases in runtime?

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.

overflow:hidden but let the content auto-scroll

I have a div where content is appended periodically to it via query's append(). As the content gets longer, it will eventually overflow the div. I want no scrollbars to appear when overflowed, but still have the content scroll up to show the new content below.
Is this possible? When I use overflow-x: hidden no scrollbar appears but the content is hidden.

If the size of the container is fixed, you could place the content inside an absolutely positioned wrap like so:
<div class="container">
<div class="wrap">
<p>bah</p>
</div>
</div>
and css:
.container {
y-overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
.wrap {position:absolute; bottom: 0; left:0;right:0;
}
http://jsfiddle.net/sXGd9/

append() will add to content at the end. You may want to prepend() new content, so the data get added before the old content.
As for overflow, you can set it to scroll so that scrollbars appear if necessary, or hidden so no scrollbars will appear but the content won't be visible. Otherwise you can set it to visible so it will be visible but the scrollbars won't appear.
Do you want the overflowed content to be visible? If so set the overflow: visible otherwise set overflow: hidden (because you don't want scrollbars).
Anyway with this you wan't be able to scroll the content. If you need to scroll you have to build your own scroll system, adding event handler to your container.

If you have each appended content in your "#container" div wrapped in a seperate ".append" div you can do something like:
var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);
Is this helpfull?
Other solutions can be found in earlier post:
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

Prevent scrollbar with MarginLeft style change?

I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?

The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}

Is it possible to align an element with the bottom of the window, yet make it scrollable, with CSS only?

I have a design going on where I want to align the bottom of an intro paragraph with the bottom of the window, yet make it scroll with the rest of the page. So when the page opens, the visitor sees only the first paragraph (and a full screen background image, which is what I want to focus their attention on), but as they scroll they see the paragraph and the rest of the text. The height of the intro element can vary.
Right now I think I have to introduce some javascript to do this - meassure the height of the window, the height of the paragraph, and adjust top: or margin-top of the paragraph to the difference between the two values.
If there is a way to make a div have a height that corresponds exactly to the window height, and position the paragraph absolutely inside of this div, the let the rest of the text sit outside of the div, it could work... but I can't seem to make that happen with css. Any suggestions?

Try something like this:
<html>
<div id="wrap">
<p>Your first paragraph text here...</p>
</div>
<p id="absPos">The rest of your text here...</p>
</html>
And the CSS:
html, body, #wrap {
height: 100%;
}
#absPos {
bottom: 0;
left: 0;
position: absolute;
}