Develop Reference

Scroll event not working on chrome and not precise in firefox

I tried to build a custom scroll for my website but it's not perfect and I don't know how to improve it. It should scroll from one position to another specific position but there is a difference of pixels that become bigger every scroll events. It also seems to not work on chrome.
here is a link to the html file :http://infographie.inraci.be/blc/blc.html
here is the code :
$(window).bind('mousewheel DOMMouseScroll', function(event){
var hauteur5 = $(window).height();
var scroll5 = $(window).scrollTop();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
$(window).scrollTo(scroll5-hauteur5/4,1,function(){
})
} else {
$(window).scrollTo(scroll5+hauteur5/4,1,function(){
})
}
});

If you want check this snippet: https://stackoverflow.com/a/38572744/3605379
There I check the week speed with a timeout. Play with it so you can get the timing right.

implementing horizontal scrolling with two finger gesture

I am trying to implement horizontal scrolling using a two finger gesture on laptops. I am trying to find a solution that works in IE, chrome and safari. Currently I have tried to using the mouse wheel event to simply capture the scrolling Event. I thought I could use the deltaX and deltaY to determine if it is scrolling vertically and horizontally.
$('#ryan').on('mousewheel', function (event) {
if (event.originalEvent.deltaX > 0) {
console.log(event.originalEvent.deltaX);
console.log("horizontally");
console.log(event.deltaX);
}
Here is a fiddle which is not working. I am also not sure if there is another event I am missing.

I have never done it but jquery has a well documented element handler for scroll
I would try
$('#ryan').scroll(function(event) {
if (event.originalEvent.deltaX > 0) {
console.log(event.originalEvent.deltaX);
console.log("horizontally");
console.log(event.deltaX);
});
http://api.jquery.com/scroll/

Disable all scrolling on webpage

I would like to know if it is possible to disable all scrolling on a webpage.
I am currently using
html, body { overflow:hidden; }
The issue is that this does not work on iOS devices and if you hold in the mouse wheel and drag it down you can also scroll, so it seems like a very poor solution to the problem
Is there a way to disable all methods of scrolling on all devices and then re-enable it?

I have had this exact same issue, i fixed it with the following;
var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
disableScroll = true;
scrollPos = $(window).scrollTop();
}
function enableScroll() {
disableScroll = false;
}
$(function(){
$(window).bind('scroll', function(){
if(disableScroll) $(window).scrollTop(scrollPos);
});
$(window).bind('touchmove', function(){
$(window).trigger('scroll');
});
});
the touch move is bound to the window as the window scroll event is not fired until touch move is completed, so this allows a much smoother experience on iOS!
This isn't a perfect solution as you can 'throw' the page, but it will return to desired position when the throw has complete (as the window scroll event will then be fired). This is because iOS browsers strip out a lot of events for performance. also setTimeout and setInterval functions do not fire whilst the page is being thrown, having a loop isn't an option either!
see here http://jsfiddle.net/8T26k/

Scroll a page with touch events

I have a website page and I've added to the body of the page touch events.
More exactly for swipe right and swipe left. Since the event listener is added to the body of the page and I have added event.preventDefault(); i can't scroll the page any more.
How can i scroll the page in the browser ?
P.S. The code is pure javascript / library agnostic.
Edit #1. This site viewed in mobile seems to do it http://swipejs.com/ . It slides the tabs right to left and back as well as scroll the website. I just can't seen in the code how :(

Use iscroll plugin. it's help to you.
see example : http://cubiq.org/dropbox/iscroll4/examples/simple/

Unfortunately there is no easy answer. The best way is to build smart gesture recognizers. Or use something like this (for Safari Mobile):
http://mud.mitplw.com/JSGestureRecognizer/#single-gesture
You will notice that when you are touching a gesture recognizer, there is no scrolling. However, you could make the callback of a recognizer scroll the page.
Wondering why it only says it supports Safari mobile? That's because Safari mobile has its own set of touch events. However, you can use it as a start and try to add support for other platforms.

I have the same problem that swiping without "preventDefault()". Because I want to achieve a pulltorefresh's effect, I can only prevent the pulldown event but not pullup. The code like this:
function touchBindMove(evt){
//evt.preventDefault();
try{
var deviceHeight = window.innerHeight;
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
if((y - offsetStart) > 0 && document.body.scrollTop == 0){
evt.preventDefault();
var page = document.getElementsByClassName('tweet-page')[0];
var rate = 0;
end = x;
offsetEnd = y;
rate = (offsetEnd - offsetStart) / (2 * deviceHeight);
//tool.print(rate);
easing.pullMotion(page, rate);
}
}catch(e){
alert(e.message);
}
}
"y - offsetStart" judges whether the event is pulldown and "document.body.scrollTop == 0" judges the scrollbar is in the middle or not.
Maybe it can help you a little bit.

Mobile / Touch Enabled Screens - horizontal scroll on swipe

This question has been asked after a detailed discussion on this SO question
Problem:
I need a horizontal scroll which can be scrolled using mouse drag on desktops and swipe events on touch enabled screens
Possible Solution:
I tried using the jQuery dragscrollable which works fine on desktops but not on touch enabled devices
So then I went on to explore Touch Swipe Jquery Plugin and came up with a possible solution at JSFiddle Code and the result for the JSFiddle can be found here
You can also find a working demo at here
My java script code is as follows
//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;
$(function()
{
$('.myClass').dragscrollable();
//if touch is enabled then we have to map the swipe event
if(is_touch_device)
$('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
function scroll_panel_list(event, phase, direction, distance)
{
var pos = $('.myClass').scrollLeft();
if(direction == 'left')
{
$('.myClass').animate({scrollLeft: pos + 200} );
}
if(direction == 'right')
{
$('.myClass').animate({scrollLeft: pos - 200} );
}
}
});​
I have tested it works fine on Android browser but not very reponsive on iPhone.
Can someone help me come up with a better solution ? I am using twitter bootstrap
EDIT:1
Well now I guess I might have hit upon a nice plugin in that seems to work fine on desktops and touch enabled devices, the plugin is called jquery.dragscroll, I have an updated demo here
EDIT:2
There seems to be another plugin that has support for touch-enabled devices, it is called Overscroll. I haven't evaluated it as yet

Additionally, there is the "Swipeview" script
http://cubiq.org/swipeview

I found an older solution and modified it for horizontal scrolling. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.
Usage:
touchHorizScroll('divIDtoScroll');
Functions:
function touchHorizScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollLeft+event.touches[0].pageX;
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollLeft=scrollStartPos-event.touches[0].pageX;
},false);
}
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
Original Vertical one-finger touch scroll:
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
Vertical now has a simplified CSS solution, doesn't work for horizontal DIV scroll on mobile though:
-webkit-overflow-scrolling: touch
The question also asks for mouse-grab on desktop, which can be accomplished with Nice Scroll, and does work in tandem with my solution above if you need it:
https://github.com/inuyaksa/jquery.nicescroll
var nice = $("#mydiv").getNiceScroll({horizrailenabled: true, hwacceleration: true});

This is possible with
http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html
$('body').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {
switch (direction) {
case 'left':
// Code here
break;
case 'right':
//Code here
break;
}
},
allowPageScroll: "vertical"
});