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 );
}
Related
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);
}
});
});
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.
I adapted this plugin for jQuery that uses the parallax effect for my website.
Problem is (even in the demo in the link above) that Chrome and IE have a really NOT smooth scroll.. it only works well when you press the middle button on the mouse and the scroll is continuous (not "step-by-step" when you scroll the mouse wheel). So when you use the mouse wheel to scroll, the parallax effect is completely ruined. In Firefox instead the scroll is continous even when scrolling with the mouse wheel. Is there a way to have continous scrolling in IE and Chrome too (javascript?).
Here's my website (as you can see, if you visit it whit Firefox the effect is completely different).
I solved the problem with this jQuery script (which adds EventListener for both keyboard and mouse scroll), hope it helps. :)
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 1300;
var distance = 270;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}
$(document).keydown(function (e) {
switch (e.which) {
//up
case 38:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - distance
}, time);
break;
//down
case 40:
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() + distance
}, time);
break;
}
});
I modified the code a little bit for keyboard and jerks are no longer coming in IE and Chrome.
http://jsfiddle.net/cZuym/247/
I just added e.preventDefault();
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var time = 1000;
var distance = 300;
function wheel(event) {
if (event.wheelDelta) delta = event.wheelDelta / 120;
else if (event.detail) delta = -event.detail / 3;
handle();
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
function handle() {
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}
$(document).keydown(function (e) {
switch (e.which) {
//up
case 38:
e.preventDefault();
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - distance
}, time);
break;
//down
case 40:
e.preventDefault();
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() + distance
}, time);
break;
}
});