文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >鼠标滚动移动无法在触摸屏上工作

问鼠标滚动移动无法在触摸屏上工作
EN

Stack Overflow用户
提问于 2020-11-24 04:18:33
回答 1查看 48关注 0票数 0

我是css和html的新手，也不太了解javascript。我在code pen上找到了这段js代码，除了在触摸屏上，它工作得很好。如何让div中的内容在触摸屏上滚动？可能会在脚本中添加一些代码来检测touchsreen并禁用鼠标移动，并用overflow-x: auto替换overflow: hidden，但我不知道如何做到这一点。

谢谢

​

代码语言：javascript
复制
$(function() {
  $(window).load(function() {
    var $gal = $("#scrolling-wrapper"),
      galW = $gal.outerWidth(true),
      galSW = $gal[0].scrollWidth,
      wDiff = (galSW / galW) - 1, // widths difference ratio
      mPadd = 60, // mousemove Padding
      damp = 20, // Mmusemove response softness
      mX = 0, // real mouse position
      mX2 = 0, // modified mouse position
      posX = 0,
      mmAA = galW - (mPadd * 2), // the mousemove available area
      mmAAr = (galW / mmAA); // get available mousemove didderence ratio
    $gal.mousemove(function(e) {
      mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
      mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
    });
    setInterval(function() {
      posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"  
      $gal.scrollLeft(posX * wDiff);
    }, 10);
  });
});
代码语言：javascript
复制
#scrolling-wrapper {
  white-space: nowrap;
  max-width: 960px;
  height: 425px;
  overflow: hidden;
}

#musees {
  background-image: url('https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_BG.jpg');
  width: 2600px;
  height: 425px;
}

.muse1 {
  left: 55px;
  top: 90px;
}

.muse2 {
  left: 340px;
  top: -15px;
}

.muse3 {
  left: 575px;
  top: 75px;
}

.muse4 {
  left: 750px;
  top: 20px;
}

.muse5 {
  left: 1175px;
  top: 75px;
}

.muse6 {
  left: 1510px;
  top: 75px;
}

.muse7 {
  left: 1640px;
  top: 15px;
}

.muse8 {
  left: 1885px;
  top: 55px;
}

.muse9 {
  left: 2155px;
  top: 55px;
}


/* A wrapper for your images to transition */

.transition-wrapper {
  position: relative;
  display: inline-block
}


/* Position each image and apply a transition */

.transition-wrapper img {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


/* Automatically hide an image during hover (to reveal the other one) */

.transition-wrapper img:last-of-type:hover {
  opacity: 0;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scrolling-wrapper">
  <div id="musees">
    <a class="transition-wrapper muse1" href="SallesID.php?Type_No=33&ID_Article=5&SalleID=1">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01.png">
    </a>

    <a class="transition-wrapper muse2" href="SallesID.php?Type_No=33&ID_Article=6&SalleID=2">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02.png">
    </a>

    <a class="transition-wrapper muse3" href="SallesID.php?Type_No=33&ID_Article=7&SalleID=3">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03.png">
    </a>

    <a class="transition-wrapper muse4" href="SallesID.php?Type_No=33&ID_Article=8&SalleID=4">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/images/ExpoVirtuel_Salle04Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle04.png">
    </a>

    <a class="transition-wrapper muse5" href="SallesID.php?Type_No=33&ID_Article=14&SalleID=5">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05.png">
    </a>

    <a class="transition-wrapper muse6" href="SallesID.php?Type_No=33&ID_Article=15&SalleID=6">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06.png">
    </a>

    <a class="transition-wrapper muse7" href="SallesID.php?Type_No=33&ID_Article=16&SalleID=7">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07.png">
    </a>

    <a class="transition-wrapper muse8" href="SallesID.php?Type_No=33&ID_Article=22&SalleID=8">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08.png">
    </a>

    <a class="transition-wrapper muse9" href="SallesID.php?Type_No=33&ID_Article=98&SalleID=28">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09.png">
    </a>

  </div>
</div>
<script src="js/script.js"></script>

​

javascript
jquery
EN

回答 1

Stack Overflow用户

发布于 2020-11-24 06:53:45

您需要一个与您在这里感觉到的事件类似的事件：

代码语言：javascript
复制
$gal.mousemove(function(e) {
  mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
  mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
});

但触摸屏上的情况有点不同--很大程度上是因为人类有几个手指，触摸事件需要能够告诉你屏幕上有多少个手指。您只对沿着图库移动的用户感兴趣，因此touchmove事件中的第一个设置将是您感兴趣的设置。

代码语言：javascript
复制
e.touches[0].clientX

我对jQuery不是很熟悉，看不出它有一个和鼠标移动一样的touchmove方法，所以这里有一个使用addEventListener的建议。这段代码在我的iPad iOS14上运行正常。

​

代码语言：javascript
复制
$(function() {
  $(window).load(function() {
    var $gal = $("#scrolling-wrapper"),
      galW = $gal.outerWidth(true),
      galSW = $gal[0].scrollWidth,
      wDiff = (galSW / galW) - 1, // widths difference ratio
      mPadd = 60, // mousemove Padding
      damp = 20, // Mmusemove response softness
      mX = 0, // real mouse position
      mX2 = 0, // modified mouse position
      posX = 0,
      mmAA = galW - (mPadd * 2), // the mousemove available area
      mmAAr = (galW / mmAA); // get available mousemove didderence ratio
    $gal.mousemove(function(e) {
      mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
      mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
    });
    
document.getElementById('scrolling-wrapper').addEventListener('touchmove',(function(e) {
  mX = e.touches[0].clientX - $(this).parent().offset().left - this.offsetLeft;
  mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
}));
    setInterval(function() {
      posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"  
      $gal.scrollLeft(posX * wDiff);
    }, 10);
  });
});
代码语言：javascript
复制
#scrolling-wrapper {
  white-space: nowrap;
  max-width: 960px;
  height: 425px;
  overflow: hidden;
}

#musees {
  background-image: url('https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_BG.jpg');
  width: 2600px;
  height: 425px;
}

.muse1 {
  left: 55px;
  top: 90px;
}

.muse2 {
  left: 340px;
  top: -15px;
}

.muse3 {
  left: 575px;
  top: 75px;
}

.muse4 {
  left: 750px;
  top: 20px;
}

.muse5 {
  left: 1175px;
  top: 75px;
}

.muse6 {
  left: 1510px;
  top: 75px;
}

.muse7 {
  left: 1640px;
  top: 15px;
}

.muse8 {
  left: 1885px;
  top: 55px;
}

.muse9 {
  left: 2155px;
  top: 55px;
}


/* A wrapper for your images to transition */

.transition-wrapper {
  position: relative;
  display: inline-block
}


/* Position each image and apply a transition */

.transition-wrapper img {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


/* Automatically hide an image during hover (to reveal the other one) */

.transition-wrapper img:last-of-type:hover {
  opacity: 0;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scrolling-wrapper">
  <div id="musees">
    <a class="transition-wrapper muse1" href="SallesID.php?Type_No=33&ID_Article=5&SalleID=1">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01.png">
    </a>

    <a class="transition-wrapper muse2" href="SallesID.php?Type_No=33&ID_Article=6&SalleID=2">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02.png">
    </a>

    <a class="transition-wrapper muse3" href="SallesID.php?Type_No=33&ID_Article=7&SalleID=3">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03.png">
    </a>

    <a class="transition-wrapper muse4" href="SallesID.php?Type_No=33&ID_Article=8&SalleID=4">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/images/ExpoVirtuel_Salle04Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle04.png">
    </a>

    <a class="transition-wrapper muse5" href="SallesID.php?Type_No=33&ID_Article=14&SalleID=5">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05.png">
    </a>

    <a class="transition-wrapper muse6" href="SallesID.php?Type_No=33&ID_Article=15&SalleID=6">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06.png">
    </a>

    <a class="transition-wrapper muse7" href="SallesID.php?Type_No=33&ID_Article=16&SalleID=7">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07.png">
    </a>

    <a class="transition-wrapper muse8" href="SallesID.php?Type_No=33&ID_Article=22&SalleID=8">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08.png">
    </a>

    <a class="transition-wrapper muse9" href="SallesID.php?Type_No=33&ID_Article=98&SalleID=28">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09Glow.png">
      <img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09.png">
    </a>

  </div>
</div>
<script src="js/script.js"></script>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64975770

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档