时间戳

首页 > 解决方案 > 使用鼠标滚动从右到左滚动vertical-rl div

javascript - 使用鼠标滚动从右到左滚动vertical-rl div

问题描述

这里我做了一个vertical-rl环境；

(function() {
  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta * 50);
    document.body.scrollLeft -= (delta * 50);
    e.preventDefault();
  }
  if (window.addEventListener) {
    window.addEventListener("mousewheel", scrollHorizontally, false);
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    window.attachEvent("onmousewheel", scrollHorizontally);
  }
})();
#body {
  height: 80%;
  min-width: 100%;
  writing-mode: vertical-rl;
  font-size: 3.0rem;
}
<div id="body">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
  <p>15</p>
  <p>16</p>
  <p>17</p>
  <p>18</p>
  <p>19</p>
  <p>20</p>
  <p>21</p>
  <p>22</p>
</div>

javascript 通过使用鼠标滚轮向下滚动，可以使垂直主体从左向右滚动。

但由于这是一个垂直rl环境，我如何编辑脚本以滚动到另一个方向；从右到左？我已尽力编辑脚本，但无法完全弄清楚如何编辑。

编辑：尝试在整页上打开片段。

标签： javascripthtmlcss

解决方案

如果 html 正文本身是dir="rtl"，则滚动应以相反的方向进行。因此，将 body 设置为dir="rtl"并制作一个 div 为writing-mode: vertical-rl;and dir="ltr。并将脚本的两个更改(delta * 50)为(delta * -50).

(function() {
  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.documentElement.scrollLeft -= (delta * -50);
    document.body.scrollLeft -= (delta * -50);
    e.preventDefault();
  }
  if (window.addEventListener) {
    window.addEventListener("mousewheel", scrollHorizontally, false);
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    window.attachEvent("onmousewheel", scrollHorizontally);
  }
})();
<body dir="rtl">

<div style="writing-mode: vertical-rl;" dir="ltr">

<p>月亮代表我的心&lt;/p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>

</div>

</body>

推荐阅读