為什么 OnClick 功能只能在調整窗口大小后工作一次？

Question

我用快速滾動在 wordpress 中創建了一個可滾動的容器。 它包含一個投資組合模塊。

<div id="projekte-startseite" class="et_pb_module et_pb_filterable_portfolio et_pb_filterable_portfolio_0 scroll-snap   et_pb_css_filters et_pb_portfolio et_pb_bg_layout_light et_pb_filterable_portfolio_fullwidth" data-posts-number="20" style="display: block;">


                <div class="et_pb_portfolio_filters clearfix"><ul class="clearfix"><li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">Alle</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="aktuelle-projekte">Aktuelle Projekte</a></li></ul></div><!-- .et_pb_portfolio_filters -->

                <div class="et_pb_portfolio_items_wrapper no_pagination">
                    <div class="et_pb_portfolio_items">             <div id="post-4572" class="et_pb_portfolio_item project_category_aktuelle-projekte project_category_gelb et_pb_filterable_portfolio_item_0_0 post-4572 project type-project status-publish has-post-thumbnail hentry project_category-aktuelle-projekte project_category-gelb active first_in_row" style="">
                                        <a href="http://demo.braunmitbraun-designagentur.de/project/gelb">
                            <span class="et_portfolio_image">
                                <img src="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/gelbe-fläche_web.jpg" alt="Gelb" class="" width="1080" height="9999">                                                  </span>
                        </a>
                                </div><!-- .et_pb_portfolio_item -->
                                <div id="post-133" class="et_pb_portfolio_item project_category_aktuelle-projekte project_category_branding project_category_corporate-design project_category_print project_category_web et_pb_filterable_portfolio_item_0_1 post-133 project type-project status-publish has-post-thumbnail hentry project_category-aktuelle-projekte project_category-branding project_category-corporate-design project_category-print project_category-web active last_in_row">
                                        <a href="http://demo.braunmitbraun-designagentur.de/projekte/manuela-ostermann-physiotherapie/corporate-design">
                            <span class="et_portfolio_image">
                                <img src="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design.jpg" alt="Manuela Ostermann" class="" width="1080" height="9999" srcset="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design.jpg 1080w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design-980x1265.jpg 980w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Ostermann-Physiotherapie-Corporate-Design-480x620.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1080px, 100vw">                                                    </span>
                        </a>
                                </div><!-- .et_pb_portfolio_item -->
                                <div id="post-88" class="et_pb_portfolio_item project_category_aktuelle-projekte project_category_event project_category_kundenevent project_category_print et_pb_filterable_portfolio_item_0_2 post-88 project type-project status-publish has-post-thumbnail hentry project_category-aktuelle-projekte project_category-event project_category-kundenevent project_category-print active first_in_row">
                                        <a href="http://demo.braunmitbraun-designagentur.de/projekte/benecke-kaliko/the-value-of-better-interiors-conference.html">
                            <span class="et_portfolio_image">
                                <img src="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface.jpg" alt="Benecke-Kaliko" class="" width="1080" height="9999" srcset="http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface.jpg 1080w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface-980x1265.jpg 980w, http://demo.braunmitbraun-designagentur.de/wp-content/uploads/2020/03/Projekte-Benecke-Kaliko-listen-to-the-surface-480x620.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1080px, 100vw">                                                   </span>
                        </a>
                                </div><!-- .et_pb_portfolio_item -->
                </div><!-- .et_pb_portfolio_items -->
                </div>

            </div>

並且有一個按鈕可以在點擊時滾動。

<button class="button-next" onClick="goCarousel('next')"></button>

這是我用來實現點擊滾動的 javascript 代碼。 我在這個平台上找到了它，只是重命名了 ID 和類：

<script>
 var carouselPositions;
var halfContainer;
var currentItem;

function getCarouselPositions() {
  carouselPositions = [];
  document.querySelectorAll('.et_pb_portfolio_item').forEach(function(div) {
    carouselPositions.push([div.offsetTop, div.offsetTop + div.offsetHeight]); // add to array the positions information
  })
  halfContainer = document.querySelector('#projekte-startseite').offsetHeight/2;
}

getCarouselPositions(); // call it once

function goCarousel(direction) {

  var currentScrollTop = document.querySelector('#projekte-startseite').scrollTop;
  var currentScrollBottom = currentScrollTop + document.querySelector('#projekte-startseite').offsetHeight;

  if (currentScrollTop === 0 && direction === 'next') {
      currentItem = 1;
  } else if (currentScrollBottom === document.querySelector('#projekte-startseite').scrollHeight && direction === 'previous') {
      console.log('here')
      currentItem = carouselPositions.length - 2;
  } else {
      var currentMiddlePosition = currentScrollTop + halfContainer;
      for (var i = 0; i < carouselPositions.length; i++) {
        if (currentMiddlePosition > carouselPositions[i][0] && currentMiddlePosition < carouselPositions[i][1]) {
          currentItem = i;
          if (direction === 'next') {
              currentItem++;
          } else if (direction === 'previous') {
              currentItem--    
          }
        }
      }
  } 

  document.getElementById('projekte-startseite').scrollTo({
    top: carouselPositions[currentItem][0],
    behavior: 'smooth' 
  });

}
window.addEventListener('resize', getCarouselPositions);
    </script>

我對 javascript 了解不多，所以我只是把這段代碼放在我的網站上，並希望一切順利。 幸運的是，它有點工作。 但問題是，如果我點擊按鈕向下滾動，它只能工作一次。 如果我第二次點擊，它就不再起作用了。 我發現當我調整窗口大小時它工作正常，但這不能成為解決方案：-D“嘿用戶，請調整窗口大小以使該網站正常工作”

我非常感謝任何想法和代碼片段！！！

Answer 1

我能夠自己解決這個問題。 我將 ID“nextBtn”添加到按鈕並將其放在我的 javascript 代碼的末尾：

document.getElementById("nextBtn").addEventListener('click', getCarouselPositions);

如果您有更好的解決方案，請告訴我，因為我是 javascript 新手，願意學習！