Javascript-карусель достигла правого или левого конца

1

Я андроид dev и вам нужен 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 я сталкиваюсь с проблемой, когда карусель /swipeable разделы веб-страниц не являются swipeable, поскольку ViewPager берет под свой контроль. Я смог обработать ViewPager, взяв управление, создав флаг, который я могу переключить, чтобы включить и выключить перехват горизонтального перехвата ViewPager. Проблема заключается в определении КОГДА для включения и выключения управления. В настоящее время я использую javascript-код, который проверяет для Overflow: hidden атрибут на веб-странице в указанном месте (x, y). Если атрибут существует, я отключу перехват ViewPager. Это работает... частично, но также ломает некоторые веб-сайты. Поэтому мне нужно хорошее решение при определении того, когда включать/отключать перехват просмотра.

Теги:

1 ответ

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.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню