Javascript - 轮播到达右端或左端

Question

我是一名 Android 开发人员，需要 javascript(不是 jQuery)来:

• 取一个点击位置 x & y
• 判断是轮播还是其他可滚动的div
• 返回是否到达滚动的右端或左端。

到目前为止，我有代码可以确定单击的位置是否是可以滚动的元素。

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;
                }

详细信息:

在将 Android Webview 与 ViewPager 结合使用时，我遇到了一个问题，即 ViewPager 控制时，网页的轮播/可滑动部分不可滑动。我能够通过创建一个标志来处理 ViewPager 的控制权，我可以切换该标志以打开和关闭 ViewPager 水平滑动拦截。问题是确定何时打开和关闭控件。目前我正在使用 javascript 代码检查网页中指定位置 (x,y) 的 Overflow:hidden 属性。如果该属性存在，那么我将禁用 ViewPager 拦截。这行得通......有时但它也会破坏一些网站。所以我需要一个好的解决方案来确定何时启用/禁用 viewpager 拦截。

Answer 1

我最终做出的解决方案是遍历元素以找到最大宽度，然后最终将其与最外层元素进行比较。

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;
            }

需要处理一些边缘情况。例如 googles flex carousel 和不使用元标记视口(viewport)的旧网站。