如何在 div 中停止水平滚动

Question

您好，我是代码中的新手，当 div 编号 2 完全可见时，我尝试停止水平滚动（因此 div 3 不可见，但甚至在那里）。 我的代码：

 $(document).ready(function() { $(window).scroll(function() { var stopScroll = $('.block-2').offset().left; if ($(window).scrollLeft() > $('.block-2').offset().left) { $(window).scrollLeft(stopScroll); } }); });

 body { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; margin-top: 0; } header { width: 100%; height: 50px; line-height: 50px; position: fixed; font-size: 24px; font-weight: 700; color: #FFF; padding: 12px 0; margin: 0; background: #252525; } .wrap { padding-top: 74px; margin: 0; flex-wrap: nowrap!important; flex-direction: row!important; display: flex; } .container { width: 960px; margin: 0 auto; overflow: hidden; flex: 0 0 100%; width: 90vw; } .block-1, .block-2 { height: 500px; text-align: center; } p { margin-top: 185px; } .block-1 { background: #27AACC; color: #FFF; } .block-2 { background: #668E99; color: #FFF }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="block-1"> <div class="container"> </div> </div> <div class="block-2"> <div class="container"> </div> </div> <div class="block-1"> <div class="container"> </div> </div> </div>

我在这个论坛中受到启发来编写这段代码。 我尝试测试了很多解决方案，但这不是步行:(。你知道我可以在哪里尝试吗？

Answer 1

我想，它解决了你的问题。 对于 jquery 和纯 javascript。

 $(document).ready(function() { $(window).scroll(function() { var wrapWidth = $('.wrap').width(); var secondBoxWidth = $('.block-2').offset().left; var scrollable = $('.wrap')[0].scrollWidth; var breakPoint = scrollable - (wrapWidth + secondBoxWidth); if ($(window).scrollLeft() >= breakPoint) { $(window).scrollLeft(breakPoint); return; } }); });

 body { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; margin-top: 0; } header { width: 100%; height: 50px; line-height: 50px; position: fixed; font-size: 24px; font-weight: 700; color: #FFF; padding: 12px 0; margin: 0; background: #252525; } .wrap { padding-top: 74px; margin: 0; flex-wrap: nowrap!important; flex-direction: row!important; display: flex; } .container { width: 960px; margin: 0 auto; overflow: hidden; flex: 0 0 100%; width: 90vw; } .block-1, .block-2 { height: 500px; text-align: center; } p { margin-top: 185px; } .block-1 { background: #27AACC; color: #FFF; } .block-2 { background: #668E99; color: #FFF }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="block-1"> <div class="container"> </div> </div> <div class="block-2"> <div class="container"> </div> </div> <div class="block-1"> <div class="container"> </div> </div> </div>

纯JS解决方案

document.addEventListener('DOMContentLoaded', function () {
  const scrollFunc = () => {
  const wrap = document.querySelector('.wrap');
  const wrapWidth = document.querySelector('.wrap').offsetWidth;
  const secondBoxWidth = document.querySelector('.block-2').offsetWidth;
  const scrollable = wrap.scrollWidth;
  const start = Math.round(window.scrollX);
  const breakPoint = scrollable - (wrapWidth + secondBoxWidth);

  if (start >= breakPoint) {
     window.scrollTo(breakPoint, 0);
     return;
    }
  };
  document.addEventListener('scroll', scrollFunc);
});