Блог

Интересно, можете ли вы мне помочь, пожалуйста? Я пытаюсь заставить часть javascript работать на устройствах ios. У меня есть несколько изображений на странице в divs, и по щелчку я хотел бы скользить по панели информации (скрытой слева), и как только эта панель скользит, если щелкнуть по этой панели, я бы хотел, чтобы она сдвинулась влево.

Вот код, который у меня есть, который отлично работает во всех настольных браузерах, но ничего не делает на ios — я не могу его понять и не уверен, как протестировать или проверить наличие проблем на ios.

Вот скрипка: https://jsfiddle.net/adpLqbt2/31 /

CSS

 .box {
  display: inline-block;
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
  }

.overlay-btn {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  height: 500px;
  width: 500px;
  z-index: 10;
  background: url('../img/icons/info.svg') 98% 98% no-repeat;
}

.overlay-content {
  position: absolute;
  top: 0;
  left: -500px;
  width: 500px;
  margin: 0;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}


.over-show {
  left: 0;
  height: 500px;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}
  

HTML

            <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="rah" />
          </div>
          <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="yay" />
          </div>
          <div class="box">
            <div class="overlay-btn"></div>
            <div class="overlay-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <img src="https://via.placeholder.com/500" alt="see" />
          </div>


  

JS

 const triggers = document.getElementsByClassName('overlay-btn');
const triggerArray = Array.from(triggers).entries();
const panels = document.getElementsByClassName('overlay-content');
const infoButtons = document.getElementsByClassName('overlay-btn');

for (let [index, trigger] of triggerArray) {
  let triggerIndex = index;
  function togglePanel() {
    panels[triggerIndex].classList.toggle('over-show');
    infoButtons[triggerIndex].classList.toggle('js-fade');
  }
  trigger.addEventListener('click', togglePanel);
  infoButtons[triggerIndex].addEventListener('click', togglePanel);
}