Ok, here is the working cross-browser code, which has easing is well:
function handle(delta) {
var time = 1500;
var easing = 'easeInOutExpo';
var distance = document.getElementById('Element').scrollHeight;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time, easing );
}
/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
To get the distance there are two options:
1. manually by giving a value
2. automatically through css by defining "Element"
Hope to have helped.
Related
We have some render issues during webView scroll that are not tenable to fix programatically. We have tried all scenarios. FastDOM, shrinking the DOM to our best possible limiting, lazy loading etc. We archive some of the DOM tree but decided if we can get a delta and set a maximal user initiated scroll speed the reflow and repaints will have ample time to render before hitting the viewport. We tried this fiddle but due to mousewheel we can't get it to work in webview. Any tips would be grateful http://jsfiddle.net/36dp03ur/
if (window.addEventListener) window.addEventListener('DOMMouseScroll',
wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(delta) {
var time = 1000;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time );
}
I want to control my scrolling speed like this website http://www.powerwashingcharlotte.com/
when you scroll fast it covers a lot distance and when you scroll slow it covers less distance.
I tried to achieve this accroding to this fiddle:
http://jsfiddle.net/36dp03ur/
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(delta) {
var time = 1000;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time );
}
but this isn't providing the same effect as the website link I've provided. Any kind of help is appreciated. Thank you.
edit: it's been 8 hours since I've posted this question, but still haven't got an answer. Thought of bumping it.
window.addEventListener('wheel', DoSomething);
window.addEventListener('mousewheel', DoSomething);
window.addEventListener('DOMMouseScroll', DoSomething);
Try one of these, it's browser specific.
I use chrome and scrolling is fast but its dont smooth. Text jumps multiple times.
But on this site http://www.if-not-true-then-false.com/ scroll works very smooth! And FAST!
http://bassta.bg/demos/smooth-page-scroll/ This scroll is smooth but very sloow and lagga (fast mount wheel dont change speed of scroll screen)
How this site have this smooth scroll? I cant find it(
try this one
<script type="text/javascript">
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle(delta) {
var time = 1000;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time );
}
</script>
First make a link with #top link then try the following code
try this
<script type="text/javascript">
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, 1000);//here you can specify your time for smooth operation
return false;
});
</script>
I'm looking to make something exactly like Facebook's Android app's UX for swiping between News Feed, Friend Requests, Messages, and Notifications. You should be able to "peek" at the next view by panning to the right of left, and it should snap to the next page when released if some threshold has been passed or when swiped.
Every scroll snap solution I've seen only snaps after the scrolling stops, whereas I only ever want to scroll one page at a time.
EDIT: Here's what I have so far. It seems to work fine when emulating an Android device in Google Chrome, but doesn't work when I run it on my Galaxy S4 running 4.4.2. Looking into it a bit more, it looks like touchcancel is being fired right after the first touchmove event which seems like a bug. Is there any way to get around this?
var width = parseInt($(document.body).width());
var panThreshold = 0.15;
var currentViewPage = 0;
$('.listContent').on('touchstart', function(e) {
console.log("touchstart");
currentViewPage = Math.round(this.scrollLeft / width);
});
$('.listContent').on('touchend', function(e) {
console.log("touchend");
var delta = currentViewPage * width - this.scrollLeft;
if (Math.abs(delta) > width * panThreshold) {
if (delta < 0) {
currentViewPage++;
} else {
currentViewPage--;
}
}
$(this).animate({
scrollLeft: currentViewPage * width
}, 100);
});
In case anyone wants to do this in the future, the only way I found to actually do this was to manually control all touch events and then re-implement the normally-native vertical scrolling.
It might not be the prettiest, but here's a fiddle to what I ended up doing (edited to use mouse events instead of touch events): http://jsfiddle.net/xtwzcjhL/
$(function () {
var width = parseInt($(document.body).width());
var panThreshold = 0.15;
var currentViewPage = 0;
var start; // Screen position of touchstart event
var isHorizontalScroll = false; // Locks the scrolling as horizontal
var target; // Target of the first touch event
var isFirst; // Is the first touchmove event
var beginScrollTop; // Beginning scrollTop of ul
var atanFactor = 0.6; // atan(0.6) = ~31 degrees (or less) from horizontal to be considered a horizontal scroll
var isMove = false;
$('body').on('mousedown', '.listContent', function (e) {
isMove = true;
isFirst = true;
isHorizontalScroll = false;
target = $(this);
currentViewPage = Math.round(target.scrollLeft() / width);
beginScrollTop = target.closest('ul').scrollTop();
start = {
x: e.originalEvent.screenX,
y: e.originalEvent.screenY
}
}).on('mousemove', '.listContent', function (e) {
if (!isMove) {
return false;
}
e.preventDefault();
var delta = {
x: start.x - e.originalEvent.screenX,
y: start.y - e.originalEvent.screenY
}
// If already horizontally scrolling or the first touchmove is within the atanFactor, horizontally scroll, otherwise it's a vertical scroll of the ul
if (isHorizontalScroll || (isFirst && Math.abs(delta.x * atanFactor) > Math.abs(delta.y))) {
isHorizontalScroll = true;
target.scrollLeft(currentViewPage * width + delta.x);
} else {
target.closest('ul').scrollTop(beginScrollTop + delta.y);
}
isFirst = false;
}).on('mouseup mouseout', '.listContent', function (e) {
isMove = false;
isFirst = false;
if (isHorizontalScroll) {
var delta = currentViewPage * width - target.scrollLeft();
if (Math.abs(delta) > width * panThreshold) {
if (delta < 0) {
currentViewPage++;
} else {
currentViewPage--;
}
}
$(this).animate({
scrollLeft: currentViewPage * width
}, 100);
}
});
});
I am trying to move an image from side to side using the mousewheel. The image by default is set to absolute position and left=100px. It is not allowing for the scroll to move the image with the parseInt but if I take that out it moves immediately to left=0px. I want to be able to move it a few pixels for each wheel click.
window.onload = function() {
if (document.body.addEventListener) {
document.body.addEventListener("mousewheel", MouseWheelHandler, false);
document.body.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else document.body.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e){
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
img1.style.left = Math.max(0, Math.min(1100, parseInt(img1.style.left) + (delta))) + "px";
return false;
}
};
Don't use that event! It's not well supported and could give you headaches.
https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mousewheel