Just imagine that we want to develop a webpage contains two columns, the left column shows some texts and the right one shows a long picture. And the function is when browsing the long picture, the left column won't move. It's very common in some online shopping websites, especially in some mobile terminals. So today I just want to use "scrollTop", "pageY" and some CSS attributes to implement this function.
<div class="container">
<img src="yourpicture" class="longpicture">
</div>
2. "mousedown" event
The "mousedown" event should compute the result of "pageY" and "scrollTop". And we can also add the "grab/grabbing" attributes to improve using experience. var longpicture = document.querySelector(".longpictrue");
var container = document.querySelector(".container");
var tempstart = 0; // record the value
var isMove = 0; // record if the div is moving
longpicture.addEventListener("mousedown", function(event){
longpicture.className = "moving";
isMove = 1;
tempstart = event.pageY + container.scrollTop;
event.preventDefault();
}, false);
3. "mousemove" event
In the "mouseove" event we should let the picture move and follows our mouse. How to do? We should let the "scrollTop" of "div" to be "tempstart - pageY". Let's see the codes: document.addEventListener("mousemove", function(event){
if (isMove === 1){
container.scrollTop = tempstart - event.pageY;
}
event.preventDefault();
}, false);
4. "mouseup" event
After moving, we should set the value of "isMove" to be "0". document.addEventListener("mouseup", function(event){
longpicture.className = "nomove";
isMove = 0;
event.preventDefault();
}, false);
5. CSS code
Finally, let's see the CSS styles, maybe you have noticed changing "className" in both "mousedown" and "mouseup" events. .container{
height:400px;
overflow:hidden;
}
.moving{
cursor:-webkit-grab;
cursor:-moz-grab;
cursor:grab;
}
.nomove{
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor:grabbing;
}
All in all, let's see the result as follows. You can browser the long picture without moving the left texts.
You can use your mouse or finger(mobile phone users) to browser the right picture, when you move the right picture, the left column won't move.
Your screen is too small. Please use computer screen to see this example.
Have a nice day.
(That's all)