如何使用移动设备的触摸事件在固定容器中滚动图像？

Question

此bounty已结束。这个问题的答案有资格获得+ 50声望赏金。赏金宽限期在18小时内结束。 Janak Prajapati正在寻找规范答案。

我正在研究在固定容器div中具有较长图像的解决方案。我要实现的是每当用户滑动图像的一部分时应根据其可见。

我已经实现了基本功能，但是无法正常工作。当我在webkit浏览器上检查滚动时，滚动时似乎也有些混响]

这是我的相同代码。这是基本的300x250广告素材

const target = document.querySelector('#scrollbg');
    var clientX, clientY;
    target.addEventListener('touchstart', function(e) {
      clientX = e.changedTouches[0].clientX;
      clientY = e.changedTouches[0].clientY;
    }, true);
    target.addEventListener('touchmove', function(event) {
          var deltaY;
          deltaY = event.changedTouches[0].clientX - clientX;
          const toLeft  = deltaY < 0 && target.scrollLeft > 0
          const toRight = deltaY > 0 && target.scrollLeft < target.scrollWidth - target.clientWidth
          if (toLeft || toRight) {
            event.preventDefault()
            target.scrollLeft += deltaY
          }
          if (event.cancelable) {
            event.preventDefault();
          }
    }, true);

    target.addEventListener('touchend', function(event) {
          var deltaX, deltaY;
          deltaY = event.changedTouches[0].clientX - clientX;
         if (event.cancelable) {
            event.preventDefault();
          }
    }, true);
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}
html,body {
    font-family:Open Sans;
}
.ad300x250_container {
    width:300px;
    height:250px;
    float:left;
    position:relative;
}

.img-container{
  width: 300px;
  overflow-x: scroll;
    overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.ad300x250_action button {
    background: #058562;
    border-radius: 5px;
    color: #fff;
    border-color: #058562;
    font-size: 14px;
    font-weight:700;
    font-family: open sans;
    border-style: solid;
    text-align:center;
    width:80%;
    padding:5px 15px;
    width:130px;
    position:absolute;
    top:165px;
    left:80px;  
    box-shadow: 0 8px 6px -6px #999;    
}

.ad_native_container {
        float:left;
        height:50px;
    }
    .ad300x250_icon {
        float: left;
        width: 42px;
        height: 50px
    }
    .ad300x250_icon img {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        margin: 1px;
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .ad300x250_title_container {
        float: left;
        width: 200px;
        height: 50px;
        margin-left: 10px;
        margin-top: 0px;
    }

    .ad300x250_title {
        font-family: open sans;
        font-weight: 700;
        font-size: 15px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 14px;
        padding-top: 6px
    }

    .ad300x250_action_container {
        float: left
    }

    .ad300x250_description {
        clear: left;
        float: left;
        height: 25px;
        margin-top:5px;
    }

    .ad300x250_description_text {
        font-family: open sans;
        font-size: 14px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;

    }

    .ad300x250_action_container button {
        height: 27px;
        background: #058562;
        border-radius: 4px;
        color: #fff;
        border-color: #058562;
        font-size: 12px;
        font-weight: 700;
        font-family: open sans;
        border-style: solid;
        position: absolute;
        right: 0;
        top: 11px;
        display: flex;
        padding: 2px 15px
    }
    .ad300x250_description_rating {
        font-size:14px;
    }
    .ad_media_container {
        clear: left;
        float: left;
        height: 200px;
    }
<div class="ad300x250_container" >
        <div class="img-container scroll-touch" id="scrollbg">
         <img src="http://codeclippers.xyz/sprite.png" height="180px">
        </div>
        <div class="ad300x250_action" id="act">
            <button>INSTALL1</button>
        </div>
        <div class="ad300x250_top ad_native_container" style="margin-top:20px;">
            <div class="ad300x250_icon"><img src="https://lh3.googleusercontent.com/D2je9MPn25_t8JHv4HDCOJmWZ70IS1CyN4PkuXeyEFUJzyoP8kg1tp9Wn4EZLYvqdg=s180-rw">
            </div>
            <div class="ad300x250_title_container"> 
                <div class="ad300x250_title">
                    <span>Snack video</span>
                </div>
                    <div class="ad300x250_description"> 
                        <div class="ad300x250_description_text"></div>  
                        <div class="ad300x250_description_rating">1.6 &nbsp;&#9733;  FREE <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Google_Play_logo.png" style="
    width: 100px;
    position: absolute;
    left: 130px;
    top: 222px;
"/></div>

                    </div>
                </div>
        </div>
    </div> 

请帮助

我正在研究在固定容器div中具有较长图像的解决方案。我想要实现的是每当用户滑动图像的一部分时应根据其可见。我已经实现了基本...

Answer 1

我正在查看您的代码，也许这是一个愚蠢的答案，但是您使用js来控制其滚动是否有原因吗？特别是如果您只是删除了这部分js代码，则滚动可以正常进行：