Comments on: Scrolling a overflow:auto; element on a touch screen device https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/ Photo/Dev/Design Wed, 16 Aug 2017 20:08:51 +0000 hourly 1 https://wordpress.org/?v=4.4.14 By: ankiewicz84 https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-10298 Wed, 15 Mar 2017 07:44:05 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-10298 Oh my word!!!.. you saved my life! I just spent the last 5 hours trying to figure out what the issue was, reading that this method wasn’t needed because of CSS updates, yup, that wasn’t true at all!!

Anyone utilizing this code please note: The code above will stop all clicks occurring in these sliders. Be sure to delete the prevent.default. Other then that this code works perfectly!

“` function isTouchDevice(){
try{
document.createEvent(“TouchEvent”);
return true;
}catch(e){
return false;
}
}

function touchScroll(id){
if(isTouchDevice()){ //if touch events exist…
var el=document.getElementById(id);
var scrollStartPos=0;

document.getElementById(id).addEventListener(“touchstart”, function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;

},false);

document.getElementById(id).addEventListener(“touchmove”, function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;

},false);
}
}

touchScroll(“YOUR_ID_GOES_HERE”);“`

]]>
By: Bob https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-9831 Thu, 19 Jan 2017 17:37:01 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-9831 Really helpful. Thank you!

]]>
By: Ian Onvlee https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-7018 Sat, 12 Mar 2016 19:41:53 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-7018 This solution of yours I think is great, I’m gonna check it out.

]]>
By: Ettienne Pro https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-7014 Sat, 12 Mar 2016 12:17:33 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-7014 I want this functionality on a desktop size device. You know using the mouse wheel scroll to navigate the page.. Normally with mouse wheel it takes long long to scroll down about 20 scrolls and even longer for blogs.. The mobile device flick up and down would be epic if used on a mouse wheel so if you scroll down fast it’ll do the same as mobile and when you want to stop at a point you just scroll up..

Perhaps that behavior can be archived only on your own website, so maybe it needs to e a browser extension..

]]>
By: Ansar Hameed https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-6032 Tue, 24 Nov 2015 15:40:09 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-6032 O Man… you are great.
You wrote it in 2010 it is still helping people by the end of 2015.
I tried many things which failed unless i reached your post. Great Job :)

]]>
By: MJHd https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-4565 Thu, 25 Jun 2015 04:46:04 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-4565 You are literally THE MAN!
I will link to you in my humans.txt :D
Where do I donate???

]]>
By: Accra Shepp https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-4370 Thu, 11 Jun 2015 03:17:52 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-4370 Hey thanks for the great code! It was a life-saver.

]]>
By: Gopiinadh https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-4171 Sun, 24 May 2015 16:58:28 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-4171 This is working with links as well, Thank you ALL

function touchScroll(id){
if(isTouchDevice()){
var el=document.getElementById(id);
var scrollStartPos=0;
var lastPos=0;
var delta=0; // isn’t really a delta
var capture=false;

el.addEventListener(“touchstart”, function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
lastPos = event.touches[0].pageY;
if (capture) {
event.preventDefault();
capture = false;
}
},false);

el.addEventListener(“touchmove”, function(event) {
var deltaY = scrollStartPos-event.touches[0].pageY;
delta = event.touches[0].pageY – lastPos;
lastPos = event.touches[0].pageY;
capture = !(delta = 0 && this.scrollTop == 0);
if (capture) {
this.scrollTop = deltaY;
event.preventDefault();
} else {
}
},false);
}
}

]]>
By: Gopiinadh https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-4169 Sun, 24 May 2015 13:24:33 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-4169 Hi Tobias

Me too having the links problem and also scrolling speed problem,
Do you have any solution.

]]>
By: Gopiinadh https://www.chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/#comment-4168 Sun, 24 May 2015 13:16:53 +0000 http://URLTOYOURWORDPRESS.com/?p=168#comment-4168 Hi Chris,

Thanks for your nice post !
But it is blocking the links default behavior of the div, and scrolling is very slow.

Could you help me in this.

]]>