垂直滚动到水平滚动回到垂直滚动

Question

我拼凑了如何实现水平滚动的 div，但我不知道如何在用户处于水平滚动的 div 中时停止垂直滚动。我试图让用户进入水平滚动，然后返回垂直。目前，当用户水平滚动时，它也是垂直滚动。

我的Fiddle：https://jsfiddle.net/girdy74/rkpf140x/19/

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>jQuery(function() {

  jQuery(".horizontal-scroll-wrapper .elementor-container").mousewheel(function(event, delta) {
    this.scrollLeft -= (delta * 30);
  });

});

.horizontal-scroll-wrapper .elementor-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 20px 0 40px 0;
}

.horizontal-scroll-wrapper .elementor-container div {
  margin: 0 10px;
  width: 500px !important;
}

.service-wrapper img {
  width: 100%;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
</head>

<body class="wrapper">
  <section>
    <div>
      <h2>Content here</h2>
      <p>Vertical Scrolling is up at the top. Once the user gets to the row of images, horizontal scrolling. Then, back to vertical scrolling after horizontal scrolling.
      </p>
      <p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

    </div>
  </section>
  <section class="elementor-section elementor-top-section elementor-element elementor-element-5e57d97 elementor-section-full_width horizontal-scroll-wrapper elementor-section-height-default elementor-section-height-default" data-id="5e57d97" data-element_type="section">
    <div class="elementor-container elementor-column-gap-default">
      <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-37fee73 service-wrapper" data-id="37fee73" data-element_type="column">
        <div class="elementor-widget-wrap elementor-element-populated">
          <div class="elementor-element elementor-element-0ffae83 elementor-widget elementor-widget-image" data-id="0ffae83" data-element_type="widget" data-widget_type="image.default">
            <div class="elementor-widget-container">
              <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
          </div>
          <div class="elementor-element elementor-element-d4fe169 elementor-widget elementor-widget-spacer" data-id="d4fe169" data-element_type="widget" data-widget_type="spacer.default">
            <div class="elementor-widget-container">
              <div class="elementor-spacer">
                <div class="elementor-spacer-inner"></div>
              </div>
            </div>
          </div>
          <div class="elementor-element elementor-element-38c552f services-title elementor-widget elementor-widget-heading" data-id="38c552f" data-element_type="widget" data-widget_type="heading.default">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">HR Management</h2>
            </div>
          </div>
          <div class="elementor-element elementor-element-effcadb servcies-exc elementor-widget elementor-widget-text-editor" data-id="effcadb" data-element_type="widget" data-widget_type="text-editor.default">
            <div class="elementor-widget-container">
              <p>We can help with HR Management.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-48647e0 service-wrapper" data-id="48647e0" data-element_type="column">
        <div class="elementor-widget-wrap elementor-element-populated">
          <div class="elementor-element elementor-element-1a962f0 elementor-widget elementor-widget-image" data-id="1a962f0" data-element_type="widget" data-widget_type="image.default">
            <div class="elementor-widget-container">
              <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
          </div>
          <div class="elementor-element elementor-element-6830704 elementor-widget elementor-widget-spacer" data-id="6830704" data-element_type="widget" data-widget_type="spacer.default">
            <div class="elementor-widget-container">
              <div class="elementor-spacer">
                <div class="elementor-spacer-inner"></div>
              </div>
            </div>
          </div>
          <div class="elementor-element elementor-element-ed7ce05 services-title elementor-widget elementor-widget-heading" data-id="ed7ce05" data-element_type="widget" data-widget_type="heading.default">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">Payroll Processing</h2>
            </div>
          </div>
          <div class="elementor-element elementor-element-f9b8f78 servcies-exc elementor-widget elementor-widget-text-editor" data-id="f9b8f78" data-element_type="widget" data-widget_type="text-editor.default">
            <div class="elementor-widget-container">
              Help with compliance and efficency. </div>
          </div>
        </div>
      </div>
      <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-bcc5cca service-wrapper" data-id="bcc5cca" data-element_type="column">
        <div class="elementor-widget-wrap elementor-element-populated">
          <div class="elementor-element elementor-element-a1c2bef elementor-widget elementor-widget-image" data-id="a1c2bef" data-element_type="widget" data-widget_type="image.default">
            <div class="elementor-widget-container">
              <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
          </div>
          <div class="elementor-element elementor-element-2d53af9 elementor-widget elementor-widget-spacer" data-id="2d53af9" data-element_type="widget" data-widget_type="spacer.default">
            <div class="elementor-widget-container">
              <div class="elementor-spacer">
                <div class="elementor-spacer-inner"></div>
              </div>
            </div>
          </div>
          <div class="elementor-element elementor-element-ddfc0ca services-title elementor-widget elementor-widget-heading" data-id="ddfc0ca" data-element_type="widget" data-widget_type="heading.default">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">Benefits</h2>
            </div>
          </div>
          <div class="elementor-element elementor-element-2670cb7 servcies-exc elementor-widget elementor-widget-text-editor" data-id="2670cb7" data-element_type="widget" data-widget_type="text-editor.default">
            <div class="elementor-widget-container">
              Better benefits.. </div>
          </div>
        </div>
      </div>
      <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-ca26df1 service-wrapper" data-id="ca26df1" data-element_type="column">
        <div class="elementor-widget-wrap elementor-element-populated">
          <div class="elementor-element elementor-element-ea43775 elementor-widget elementor-widget-image" data-id="ea43775" data-element_type="widget" data-widget_type="image.default">
            <div class="elementor-widget-container">
              <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
          </div>
          <div class="elementor-element elementor-element-c54d7f8 elementor-widget elementor-widget-spacer" data-id="c54d7f8" data-element_type="widget" data-widget_type="spacer.default">
            <div class="elementor-widget-container">
              <div class="elementor-spacer">
                <div class="elementor-spacer-inner"></div>
              </div>
            </div>
          </div>
          <div class="elementor-element elementor-element-a17f87c services-title elementor-widget elementor-widget-heading" data-id="a17f87c" data-element_type="widget" data-widget_type="heading.default">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">Tax Help</h2>
            </div>
          </div>
          <div class="elementor-element elementor-element-c21fff4 servcies-exc elementor-widget elementor-widget-text-editor" data-id="c21fff4" data-element_type="widget" data-widget_type="text-editor.default">
            <div class="elementor-widget-container">
              Help with your tax reporting. </div>
          </div>
        </div>
      </div>
      <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-9fb0b6d service-wrapper" data-id="9fb0b6d" data-element_type="column">
        <div class="elementor-widget-wrap elementor-element-populated">
          <div class="elementor-element elementor-element-1afb7f9 elementor-widget elementor-widget-image" data-id="1afb7f9" data-element_type="widget" data-widget_type="image.default">
            <div class="elementor-widget-container">
              <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350"> </div>
          </div>
          <div class="elementor-element elementor-element-399c80e elementor-widget elementor-widget-spacer" data-id="399c80e" data-element_type="widget" data-widget_type="spacer.default">
            <div class="elementor-widget-container">
              <div class="elementor-spacer">
                <div class="elementor-spacer-inner"></div>
              </div>
            </div>
          </div>
          <div class="elementor-element elementor-element-564366e services-title elementor-widget elementor-widget-heading" data-id="564366e" data-element_type="widget" data-widget_type="heading.default">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">Workers' Compensation</h2>
            </div>
          </div>
          <div class="elementor-element elementor-element-d6c3a48 servcies-exc elementor-widget elementor-widget-text-editor" data-id="d6c3a48" data-element_type="widget" data-widget_type="text-editor.default">
            <div class="elementor-widget-container">
              Reduce overhead and protect your employees. </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h2>Here is the bottom section. </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </section>
</body>

</html>

Answer 1

鼠标滚轮的默认操作会导致 scroll 事件，因此为了防止这种情况，我们应该使用 event.preventDefault()。我还添加了一个条件，以便只有在有剩余滚动空间时才会发生这种情况 - 当它到达边缘时，滚动将不会被阻止，从而提供更自然的结果。因为我们劫持了用户期望的正常行为，所以这是我们能做的最起码的补偿。我还建议不要为容器使用整个页面宽度，以便用户可以选择使用边来滚动页面。对于这个例子，我只是给整个页面一些额外的边距。

jQuery(function() {

   jQuery('.horizontal-scroll-wrapper .elementor-container').mousewheel(function(event, delta) {

      if (delta < 0 && this.scrollLeft < this.scrollWidth-$(this).width() ||
          delta > 0 && this.scrollLeft) event.preventDefault();

      this.scrollLeft -= (delta * 30);
   });
});

body {
  margin: 35px;
}

.horizontal-scroll-wrapper .elementor-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 20px 0 40px 0;
}

.horizontal-scroll-wrapper .elementor-container div {
  margin: 0 10px;
  width: 500px !important;
}

.service-wrapper img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<section>
  <div>
    <h2>Content here</h2>
    <p>Vertical Scrolling is up at the top. Once the user gets to the row of images, horizontal scrolling. Then, back to vertical scrolling after horizontal scrolling.
    </p>
    <p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</section>

<section class="elementor-section elementor-top-section elementor-element elementor-element-5e57d97 elementor-section-full_width horizontal-scroll-wrapper elementor-section-height-default elementor-section-height-default" data-id="5e57d97" data-element_type="section">
  <div class="elementor-container elementor-column-gap-default">
    <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-37fee73 service-wrapper" data-id="37fee73" data-element_type="column">
      <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-0ffae83 elementor-widget elementor-widget-image" data-id="0ffae83" data-element_type="widget" data-widget_type="image.default">
          <div class="elementor-widget-container">
            <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
          </div>
        </div>
        <div class="elementor-element elementor-element-d4fe169 elementor-widget elementor-widget-spacer" data-id="d4fe169" data-element_type="widget" data-widget_type="spacer.default">
          <div class="elementor-widget-container">
            <div class="elementor-spacer">
              <div class="elementor-spacer-inner"></div>
            </div>
          </div>
        </div>
        <div class="elementor-element elementor-element-38c552f services-title elementor-widget elementor-widget-heading" data-id="38c552f" data-element_type="widget" data-widget_type="heading.default">
          <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">HR Management</h2>
          </div>
        </div>
        <div class="elementor-element elementor-element-effcadb servcies-exc elementor-widget elementor-widget-text-editor" data-id="effcadb" data-element_type="widget" data-widget_type="text-editor.default">
          <div class="elementor-widget-container">
            <p>We can help with HR Management.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-48647e0 service-wrapper" data-id="48647e0" data-element_type="column">
      <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-1a962f0 elementor-widget elementor-widget-image" data-id="1a962f0" data-element_type="widget" data-widget_type="image.default">
          <div class="elementor-widget-container">
            <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
          </div>
        </div>
        <div class="elementor-element elementor-element-6830704 elementor-widget elementor-widget-spacer" data-id="6830704" data-element_type="widget" data-widget_type="spacer.default">
          <div class="elementor-widget-container">
            <div class="elementor-spacer">
              <div class="elementor-spacer-inner"></div>
            </div>
          </div>
        </div>
        <div class="elementor-element elementor-element-ed7ce05 services-title elementor-widget elementor-widget-heading" data-id="ed7ce05" data-element_type="widget" data-widget_type="heading.default">
          <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Payroll Processing</h2>
          </div>
        </div>
        <div class="elementor-element elementor-element-f9b8f78 servcies-exc elementor-widget elementor-widget-text-editor" data-id="f9b8f78" data-element_type="widget" data-widget_type="text-editor.default">
          <div class="elementor-widget-container">
            Help with compliance and efficency. </div>
        </div>
      </div>
    </div>
    <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-bcc5cca service-wrapper" data-id="bcc5cca" data-element_type="column">
      <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-a1c2bef elementor-widget elementor-widget-image" data-id="a1c2bef" data-element_type="widget" data-widget_type="image.default">
          <div class="elementor-widget-container">
            <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
          </div>
        </div>
        <div class="elementor-element elementor-element-2d53af9 elementor-widget elementor-widget-spacer" data-id="2d53af9" data-element_type="widget" data-widget_type="spacer.default">
          <div class="elementor-widget-container">
            <div class="elementor-spacer">
              <div class="elementor-spacer-inner"></div>
            </div>
          </div>
        </div>
        <div class="elementor-element elementor-element-ddfc0ca services-title elementor-widget elementor-widget-heading" data-id="ddfc0ca" data-element_type="widget" data-widget_type="heading.default">
          <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Benefits</h2>
          </div>
        </div>
        <div class="elementor-element elementor-element-2670cb7 servcies-exc elementor-widget elementor-widget-text-editor" data-id="2670cb7" data-element_type="widget" data-widget_type="text-editor.default">
          <div class="elementor-widget-container">
            Better benefits.. </div>
        </div>
      </div>
    </div>
    <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-ca26df1 service-wrapper" data-id="ca26df1" data-element_type="column">
      <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-ea43775 elementor-widget elementor-widget-image" data-id="ea43775" data-element_type="widget" data-widget_type="image.default">
          <div class="elementor-widget-container">
            <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
          </div>
        </div>
        <div class="elementor-element elementor-element-c54d7f8 elementor-widget elementor-widget-spacer" data-id="c54d7f8" data-element_type="widget" data-widget_type="spacer.default">
          <div class="elementor-widget-container">
            <div class="elementor-spacer">
              <div class="elementor-spacer-inner"></div>
            </div>
          </div>
        </div>
        <div class="elementor-element elementor-element-a17f87c services-title elementor-widget elementor-widget-heading" data-id="a17f87c" data-element_type="widget" data-widget_type="heading.default">
          <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Tax Help</h2>
          </div>
        </div>
        <div class="elementor-element elementor-element-c21fff4 servcies-exc elementor-widget elementor-widget-text-editor" data-id="c21fff4" data-element_type="widget" data-widget_type="text-editor.default">
          <div class="elementor-widget-container">
            Help with your tax reporting. </div>
        </div>
      </div>
    </div>
    <div class="elementor-column elementor-col-20 elementor-top-column elementor-element elementor-element-9fb0b6d service-wrapper" data-id="9fb0b6d" data-element_type="column">
      <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-1afb7f9 elementor-widget elementor-widget-image" data-id="1afb7f9" data-element_type="widget" data-widget_type="image.default">
          <div class="elementor-widget-container">
            <img src="https://via.placeholder.com/450x350" class="attachment-full size-full" alt="HR Management" width="450" height="350">
          </div>
        </div>
        <div class="elementor-element elementor-element-399c80e elementor-widget elementor-widget-spacer" data-id="399c80e" data-element_type="widget" data-widget_type="spacer.default">
          <div class="elementor-widget-container">
            <div class="elementor-spacer">
              <div class="elementor-spacer-inner"></div>
            </div>
          </div>
        </div>
        <div class="elementor-element elementor-element-564366e services-title elementor-widget elementor-widget-heading" data-id="564366e" data-element_type="widget" data-widget_type="heading.default">
          <div class="elementor-widget-container">
            <h2 class="elementor-heading-title elementor-size-default">Workers' Compensation</h2>
          </div>
        </div>
        <div class="elementor-element elementor-element-d6c3a48 servcies-exc elementor-widget elementor-widget-text-editor" data-id="d6c3a48" data-element_type="widget" data-widget_type="text-editor.default">
          <div class="elementor-widget-container">
            Reduce overhead and protect your employees. </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div>
    <h2>Here is the bottom section. </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</section>

垂直滚动到水平滚动回到垂直滚动

Vertical scrolling to horizontal scroll back to vertical scrolling

html

jquery

scroll

mousewheel