CODEWITHSUNDEEP
javascriptcss
Mustafa Dualeh
Mustafa Dualeh

Reputation: 156

Javascript -Carousel reached right or left end

I'm an android dev and need javascript(not jQuery) that will:

So far I have code that determines if the clicked location is an element that can scroll.

function(x,y) {  var elem = document.elementFromPoint(x*window.innerWidth,y*window.innerHeight);
                    if (elem.nodeName == "BODY") return false;
                     // find out if any parent of the element has 'overflow:hidden':
                     var p = elem, isOverflow = false;
                     while ((p=p.parentNode) && p.nodeName!=="BODY") {
                       if (window.getComputedStyle(p)['overflow']=="hidden") {
                         isOverflow = true;
                         break;
                       }
                     }
                     if (isOverflow) {
                       var er = elem.getBoundingClientRect(),
                           pr = p.getBoundingClientRect();

                       return (er.right < pr.left || er.left < pr.right);

                     }
                     return false;
                }

Details:

While working with Android Webview in combination with ViewPager, I come across an issue where carousels/swipeable sections of webpages are not swipeable as the ViewPager takes control. I was able to handle ViewPager taking control by creating a flag that I can toggle to turn ViewPager horizontal swipe interception on and off. The problem is determining WHEN to turn the control on and off. Currently I am using javascript code that checks for Overflow:hidden attribute in the webpage at a specified location(x,y). If the attribute exists then I disable ViewPager interception. This works....some of the time but it also breaks some websites. So what I need is a good solution on determining when to enable/disable viewpager interception.

Upvotes: 1

Views: 209

Answers (1)

Mustafa Dualeh
Mustafa Dualeh

Reputation: 156

Solution I made eventually was to loop through elements to find a max width and then finally compare it to the outermost element.

function(x,y) {  var e1 = document.elementFromPoint(x*window.innerWidth,y*window.innerHeight);


                 var e=e1, max=e1.clientWidth, body, justBeforeBody=e1.clientWidth, tag;

                 while(e=e.parentNode){
                 //unique case for google search result (flexbox) which they have recently started using for twitter feed pane
                 if(window.getComputedStyle(e)['display']=="flex"&&window.getComputedStyle(e)['overflow']=="hidden")
                 return true
                    if (max<e.clientWidth)max=e.clientWidth;
                    if (e.nodeName == "BODY") {
                    body=e.clientWidth;
                    break;
                    }
                     else
                     justBeforeBody=e.clientWidth;
                 }

                  return max>body&&
                  //desktop webpages work fine with scrolling so just ignore anywebsite that isnt a mobile friendly website
                  document.querySelector('meta[name="viewport"]')!=null;
            }

Some edge cases needed to be handled. Such as googles flex carousel and old websites that dont use meta tag viewport.

Upvotes: 1

Related Questions