特别是在移动设备上，从任何地方滚动div（无需使用jQuery插件）？ [英] Specifically on mobile, scroll a div from anywhere (w/out using jQuery plugins)?

问题描述

从原件问题，我们成功地使用了D3js来检测滚动事件，我们使用它来从任何地方滚动div ＃scroll-content ;但是，此解决方案适用于桌面，但在移动设备上的工作方式不同。问题举例：

• gh-pages - 示例适用于桌面，但不适用于移动设备。
  
• （或查看附件中的代码段）

ul>



在手机上，我们如何从页面的任何位置滚动div ＃scroll-content ？一个成功的解决方案意味着我们可以在手机页面的任何位置放置手指并垂直滑动以滚动div ＃scroll-content 。





请注意以下几点：





1. 答案应该允许使用CSS Grid。


2. 答案可以包括d3.v4答案不应该使用jQuery（正如answer0中的建议）


3. 答案不应该使用插件（正如答案1 中所建议的，并且在answer2 ）。


4. 答案应该可以工作iPhone SE同时使用Safari和Chrome浏览器。



  var body = d3.select（body）; var scroll = d3.select（＃scroll-content）; body.on（wheel，function（）{scroll.property（scrollTop，+ scroll .property（scrollTop）+ d3.event.deltaY）}）;  

  body，html {height：100％;盒子尺寸：边框;溢出：隐藏; / *停止从整个页面滚动* / background-color：＃ad6364;}＃wrapper {display：grid;高度：100％;网格模板列：重复25％（10,7％）5％;网格模板行：5％重复（4,15％）30％5％; grid-template-areas：nav nav nav nav nav nav nav nav nav nav nav navside1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2int int int int int int int int int int intftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr; grid-gap：1px;}＃scroll-content {display：block;网格列：1/3;网格行：2/6; / * background-color：＃ad6364; * / / * opacity：0.75; * / overflow：auto; background-color：＃2B3033;}。step {margin-bottom：1000px;溢出：自动;最大高度：100vh;位置：相对;填充：＃bdbdc1;}＃viz-container {background-color：＃2B3033; grid-area：viz1;}＃nav-bar {grid-area：nav; background-color：＃767678;}＃side-bar1 {grid-area：side1; background-color：＃767678;}＃side-bar2 {grid-area：side2; background-color：＃767678;}＃footer {grid-area：ftr; background-color：＃767678;}＃interaction {grid-area：int; background-color：＃767678;}。general-text {text-align：center; vertical-align：middle;颜色：＃bdbdc1; font-size：12px;}  

< html> < HEAD> < meta charset =utf-8> <！ - D3 - > < script src =https://d3js.org/d3.v5.min.js>< / script> <！ - 链接的CSS - > < link href =style.csstype =text / css =stylesheet> < /头> <身体GT; < div id =wrapper> < div id =nav-barclass =general-text> nav< / div> < div id =scroll-contentclass =general-text> < section class =step>问题：ON MOBILE，我们如何让这个div＃scroll-content在页面的任何位置滚动？ < br>< br>注意DESKTOP，如果我们将鼠标放在任何地方，此div就会滚动，这是MOBILE所需的正确行为;然而，ON MOBILE这个div不能滚动。 < br>< br> ...向下滚动。 < /节> < section class =step>注意：没有一个div位置是固定的b / c我们正在使用CSS Grid。< br>< br> ...向下滚动。 < /节> < section class =step> ...结束。 < /节> < / DIV> < div id =viz-containerclass =general-text> viz< / div> < div id =interactionclass =general-text> interaction< / div> < div id =side-bar1>< / div> < div id =side-bar2>< / div> < div id =footerclass =general-text> footer< / div> < / DIV> <！ - 创建监听器 - > < script src =scroll.jstype =text / javascript>< / script> < / body>< / html>

解决方案

wheel 事件已被解雇当鼠标滚轮滚动时。手机没有鼠标，而是有触摸屏。





更通用的事件， scroll 事件将在检测到滚动时触发，浏览器可以决定这是什么时候，这意味着它适用于桌面鼠标滚轮滚动，并触摸设备滚动。





但是，如果页面高度小于视口高度的100％，滚动事件似乎不会触发。我不确定轮子事件是否属实。如果是这样，那么下面的解决方案还需要包含额外的鼠标事件（ mousedown ， mousemove 等）触摸事件。



---





考虑到您需要更多自定义行为，无论用户在哪里滚动，都会滚动元素屏幕，并且该页面不需要进行物理滚动，您只需捕获该事件并使用它，则可能需要创建自定义滚动功能;使用 touchstart ， touchmove 和 touchend document.body 来触发您的＃scroll-content 的自定义滚动代码。您也可以使用wheel事件来触发滚动代码，因此它也适用于桌面。





这看起来像这样：

$ b $触摸开始时b



1. ，存储触摸的y坐标。 startY = e.touches [0] .pageY;


2. 触摸移动，找到开始y和移动之间的增量y 。 deltaY = startY-moveY;


3. 用此增量触发自定义滚动事件。 customScroll（deltaY）



自定义滚动事件将采用增量并应用这对＃scroll-content 使用类似于 element.scrollBy（0，deltaY）





您可能还需要将deltaY标准化，因为轮子δ可能是不同的大小，例如* 100或者反向等。



---





这只是您如何实现预期结果的简单说明。如果你不想使用诸如hammer.js的插件/库，那么你将需要自己编写自定义代码。祝你好运。




From the original question, we have successfully used D3js to detect a scroll event, which we use to scroll the div #scroll-content from anywhere; however, this solution works for desktop but is not working the same on mobile. Example of the issue:

• gh-pages - example works on desktop but not on mobile.
• jsfiddle - example works on desktop but not on mobile.
• (or see attached code snippet)

On mobile, how can we scroll the div #scroll-content from anywhere on the page? A successful solution means that we can place a finger anywhere on the mobile page and slide vertically to scroll the div #scroll-content.

Note the following:

1. answer should allow the use of CSS Grid.
2. answer can include d3.v4
3. answer should NOT use jQuery (as is suggested in answer0)
4. answer should NOT use plugins (as is suggested in answer1 and in answer2).
5. answer should work on iPhone SE using both Safari and Chrome.

var body = d3.select("body");
var scroll = d3.select("#scroll-content");

body.on("wheel", function() {
    scroll.property("scrollTop", +scroll.property("scrollTop") + d3.event.deltaY)
});

body, html {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden; /* stops scroll from the entire page */
  background-color: #ad6364;
}
#wrapper {
  display: grid;
  height:100%;
  grid-template-columns: 25% repeat(10,7%) 5%;
  grid-template-rows: 5% repeat(4,15%) 30% 5%;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "int   int  int  int  int  int  int  int  int  int  int  int"
    "ftr   ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr";
  grid-gap:1px;
}

#scroll-content {
  display:block;
  grid-column: 1/3;
  grid-row: 2 / 6;
  /*background-color:#ad6364;*/
  /*opacity: 0.75;*/
  overflow: auto;
  background-color:#2B3033;
}
.step{
  margin-bottom: 1000px;
  overflow: auto;
  max-height: 100vh;
  position: relative;
  fill:#bdbdc1;
}

#viz-container{
  background-color:#2B3033;
  grid-area: viz1;
}
#nav-bar{
  grid-area:nav;
  background-color:#767678;
}
#side-bar1{
  grid-area:side1;
  background-color:#767678;
}
#side-bar2{
  grid-area:side2;
  background-color:#767678;
}
#footer{
  grid-area:ftr;
  background-color:#767678;
}
#interaction{
  grid-area:int;
  background-color:#767678;
}
.general-text{
  text-align: center;
  vertical-align: middle;
  color:#bdbdc1;
  font-size:12px;
}

<html>
  <head>
    <meta charset="utf-8">
    
    <!-- D3 -->
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <!-- linked CSS -->
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <div id="wrapper">
      <div id="nav-bar" class="general-text">nav</div>
      <div id="scroll-content" class="general-text">
        <section class="step">Question: ON MOBILE, how do we make this div #scroll-content scrollable from anywhere on the page? <br><br>Notice ON DESKTOP that if we place the mouse anywhere, this div currently scrolls, which is the correct behavior desired for MOBILE; however, ON MOBILE this div can not be scrolled. <br><br>...scroll down.
        </section>
        <section class="step">Note: none of the div positions are fixed b/c we're using CSS Grid.<br><br>...scroll down.
         </section>
         <section class="step">...the end.
         </section>
      </div>
      <div id="viz-container" class="general-text">viz</div>
      <div id="interaction" class="general-text">interaction</div>
      <div id="side-bar1"></div>
      <div id="side-bar2"></div>
      <div id="footer" class="general-text">footer</div>
    </div>
    <!-- create listener -->
    <script src="scroll.js" type="text/javascript"></script>
  </body>
</html>

解决方案

The wheel event is fired when a mouse wheel is scrolled. Mobiles do not have a mouse, instead have a touch screen.

A more generic event, the scroll event will fire when a scroll is detected, the browser can decide when this is, meaning it works for both desktop mouse wheel scrolling, and touch device scrolling.

However, it appears that the scroll event won't fire if the page height is less than 100% of viewport height. I am unsure of whether this is true with the wheel event. If it is, then the below solution will need to also include mouse events (mousedown, mousemove etc.) in additional to touch events.

---

Considering you want more customized behaviour, in which you scroll the element regardless of where the user scrolls on the screen, and that the page doesn't need to physically scroll, you just want to capture that event and use it, it may be required to create a custom scrolling function; use the touchstart, touchmove, and touchend events on the document.body to fire the custom scroll code for your #scroll-content. You would also use the wheel event to fire the scroll code too, so it works for desktops too.

This would look something like this:

1. on touch start, store the y coordinate of the touch. startY = e.touches[0].pageY;
2. on touch move, find the delta between the start y and the move y. deltaY = startY-moveY;
3. fire the custom scroll event with this delta. customScroll(deltaY)

The custom scroll event will take a delta and apply this to the #scroll-content using something like element.scrollBy(0, deltaY)

You would also likely need to normalize the deltaY as the wheel deltaY may be a different magnitude e.g. *100 or inverse etc.

---

This is just a simplified description of how you could achieve your desired result. If you don't want ot use a plugin/library such as hammer.js then you will need to write the custom code yourself. Good luck.

这篇关于特别是在移动设备上，从任何地方滚动div（无需使用jQuery插件）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！