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

Posted

技术标签:

【中文标题】垂直滚动到水平滚动回到垂直滚动【英文标题】：Vertical scrolling to horizontal scroll back to vertical scrolling 【发布时间】：2021-11-13 07:16:31 【问题描述】：

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

我的小提琴：https://jsfiddle.net/girdy74/rkpf140x/19/




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"   > </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"   > </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"   > </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"   > </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"   > </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>

【问题讨论】：

【参考方案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"   >
          </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"   >
          </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"   >
          </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"   >
          </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"   >
          </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>

【讨论】：

shikkediel 感谢您抽出宝贵的时间和非常详细的回答！它对我帮助很大。我在测试代码时还有一个问题要问你（因为我不知道这是否可能）。当我的鼠标在屏幕上进一步向上时，水平滚动效果很好。但是，如果我的鼠标在屏幕下方并在其余内容出现之前连续点击图像，它会开始水平滚动，但我看不到所有内容。有没有办法告诉系统在偶然看到完整的 div 之前不要进行水平滚动？谢谢！ 很高兴能帮上忙，我不得不读了两遍，因为起初我以为是关于尚未加载的图像。但后来意识到这只是关于容器在视野中。我已经做了一个示例here，如果您向下滚动并且容器的底部已超过屏幕底部，或者如果您向上滚动，则顶部超出屏幕顶部，它将应用代码。 ..希望能解决它。 如果鼠标在页面下方，这完全有助于滚动！非常感谢！！

以上是关于垂直滚动到水平滚动回到垂直滚动的主要内容，如果未能解决你的问题，请参考以下文章

如何滚动到 UICollectionView 的中心（水平和垂直）

如何启用垂直滚动的滚动条并禁用水平滚动？

Swift 2 集合视图扩展，用于水平滚动到垂直

关于iframe的滚动条，如何去掉水平滚动条或垂直滚动条

如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然能够水平滚动？

android中的垂直和水平滚动视图