Question

我有一个脚本，当用户单击其路径时，该脚本可滚动SVG包装容器。不幸的是，iPhone（iOS 10）上存在一些问题：

似乎scrollTo的值计算错误（请参见下面的小提琴）。 SVG路径应在屏幕中间。在Android /桌面上，它可以完美运行。
我正在尝试在SVG上禁用touchmove事件，因此只能单击。（From this Q&A）但是容器仍然滚动。

如何解决这两个问题？

let chars = document.querySelectorAll('.el');
let container = document.querySelector('.container');

function charSelect(selector) {
  let wndHalf = window.innerWidth / 2;
  let containerTop = container.scrollTop;
  let currentChar = selector;
  let currentRect = currentChar.getBoundingClientRect();
  let currentCharOffsetLeft = currentRect.left;
  let currentCharHalfWidth = currentRect.width / 2;
  
  let centerPos = currentCharOffsetLeft + currentCharHalfWidth - wndHalf;
  //This one is miscalculating
  let scrollTo = centerPos - container.offsetLeft + container.scrollLeft;
  
  container.scrollTo({
    top: containerTop,
    left: scrollTo,
    behavior: 'smooth'
  });
  
  return false;
}

function preventDefault(e) {
  e.preventDefault();
}

function disableScroll() {
  document.body.addEventListener('touchmove', preventDefault, { passive: false });
  container.addEventListener('touchmove', preventDefault, { passive: false });
}

for (let i = 0; i < chars.length; i++) {
  chars[i].addEventListener('click', function(){
  	disableScroll();
  	charSelect(chars[i]);
  });
}

.wrapper {
  position:relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.container {
  overflow: hidden;
  overflow-x: auto;
}

.arrow-left {
  position: absolute;
  top: calc(50% - 10px);
  left: 20px;
  border-top: 20px solid transparent;
  border-right: 20px solid gray;
  border-bottom: 20px solid transparent;
}

.arrow-right {
  position: absolute;
  top: calc(50% - 10px);
  right: 20px;
  border-top: 20px solid transparent;
  border-left: 20px solid gray;
  border-bottom: 20px solid transparent;
}

<div class="wrapper">
  <div class="overlay">
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>  
  </div>
  <div class="container">
    <div class="image-wrap">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 679 636" preserveAspectRatio="none" width="779" height="736">
        <image  width="679" height="636" xlink:href="https://i.ibb.co/ZYKzMqH/template.png"></image>
        <path class="el" d="m 163.64279,300.61566 2.85839,-2.38199 6.19317,1.42919 7.86057,1.66739 1.6674,-9.28976 -8.81337,-2.62019 -10.24256,0.4764 -8.81337,7.38417 -0.2382,9.05157 6.19318,5.00218 9.28976,2.14379 3.57299,3.09659 -1.42919,3.33479 -6.66958,0.23819 -10.71896,-2.14379 -2.85839,9.76617 15.48294,1.42919 10.48076,-2.14379 5.24038,-5.24038 0.7146,-8.33697 -2.85839,-4.28758 -6.90777,-3.33479 -9.05157,-1.6674 z"/>
        <path class="el" d="m 244.15408,318.00419 -0.47639,-26.9165 10.00436,-0.47639 0.2382,36.68266 -14.05375,1.66739 -12.14815,-1.90559 -4.76399,-5.24038 -0.71459,-31.44228 h 9.76616 l -0.7146,26.6783 3.57299,4.28758 7.62237,-0.2382 z" />
        <path class="el" d="m 315.16641,314.11388 h 21.91432 l -0.7146,-14.29195 -8.09877,-8.33697 -11.19536,-1.90559 -8.81337,6.66957 -3.57298,7.38418 1.42919,18.81773 7.38417,5.71677 15.24475,1.191 6.66957,-6.19318 -7.14597,-6.19317 -5.71678,3.81118 -6.66957,-1.90559 z" />
        <path class="el" d="m 397.19106,299.83923 -4.04939,-0.7146 v -9.28976 l 6.66958,0.7146 -0.9528,-9.05157 7.38417,-5.00218 1.191,14.05375 9.05157,0.23819 v 9.28977 l -8.33697,-0.9528 v 17.15034 l 1.42919,2.85839 7.14598,1.19099 -0.2382,8.57517 -9.05157,-0.7146 -8.81337,-6.43137 -1.42919,-12.86275 z" />
      </svg>
    </div>
  </div>
</div>

当您单击SVG路径时，您会看到效果。

是否有解决iPhone上的scrollTo问题的解决方案？

0 个答案: