Question

我是一名Android开发者，需要 javascript （不是jQuery）才会：

点击位置x＆amp; 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）的网页中的溢出：隐藏属性。如果该属性存在，则禁用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和不使用meta tag视口的旧网站。

Javascript -Carousel到达右端或左端

1 个答案: