Question

我希望在某些列进入视口后为其添加CSS效果。我从另一个SO帖子：See here中得到了答案。原始文件在wordpress上，我认为这并不重要。 jQuery可以按预期工作，但是，在进行了一些故障排除后，似乎从另一个SO帖子中得到了答案，@Configuration @Lazy public class MsSqlMppvConfig { @Bean @ConfigurationProperties("spring.mppvdatasource") public DataSourceProperties mppvDataSourceProperties() { return new DataSourceProperties(); } @Bean @Lazy @Qualifier("mppvdatasource") @ConfigurationProperties("spring.mppvdatasource.hikari") public DataSource mppvDataSource() { return mppvDataSourceProperties().initializeDataSourceBuilder().build(); } @Bean(name = "tm_mppvdatasource") @Autowired DataSourceTransactionManager tm(@Qualifier("mppvdatasource") DataSource datasource) { return new DataSourceTransactionManager(datasource); }} @Autowired @Qualifier("mppvdatasource") @Lazy DataSource mppvDs;的条件永远不会成真，事件也不会触发。

elemTop < viewportBottom

就Codepen而言，如果我将<div class="content"></div> <div class="wrapper"> <div class="column first-column"> <p><strong>title</strong></p> <p>lorem.</p> </div> <div class="column second-column"> <p><strong>title</strong></p> <p>ipsum.</p> </div> <div class="column third-column"> <p><strong>title</strong></p> <p>dolor.</p> </div> </div>的高度设置为content，则效果很好。更高的破坏功能。我本地的开发项目尺寸不同，根本无法正常工作。

此外，我正在使用Chrome。如果我没记错的话，Firefox似乎运行良好。

我已经看到了各种解决方案，其中包括：

始终显示父母（父母永远不会隐藏）
设置height: 84vh;（我不确定要设置哪个，但是我已经尝试了全部设置）
从一开始就显示有问题的元素（这首先破坏了它的全部目的）

以上解决方案均无效。这是我的CodePen。

这是冗长的JS和CSS：

overflow: auto

CSS只是摘录：

function isElementInViewport(elem) {
  var $elem = $(elem);
  // Get the scroll position of the page.
  var scrollElem =
    navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? "body" : "html";
  var viewportTop = $(scrollElem).scrollTop();

  console.log(viewportTop);
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return elemTop < viewportBottom && elemBottom > viewportTop;
}

// Check if it's time to start the animation.
function checkAnimation() {
  var $elem = $(".first-column");
  var $elemTwo = $(".second-column");
  var $elemThree = $(".third-column");

  // If the animation has already been started
  if (
    $elem.hasClass("first-column-start") ||
    $elemTwo.hasClass("second-column-start") ||
    $elemThree.hasClass("third-column-start")
  )
    return;

  if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass("first-column-start");
    $elemTwo.addClass("second-column-start");
    $elemThree.addClass("third-column-start");
  }
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

我如何进行这项工作？谢谢

Answer 1

我会使用var viewportTop = $(document).scrollTop();或

var scrollElem = navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? document : "html";`

“ body”似乎在滚动时返回0（坦白地说，我目前无法提供关于原因的正确解释）

此外，最好在外部范围的Jquery中维护对您的查询的引用。

var $elem = $(".first-column");
var $elemTwo = $(".second-column");
var $elemThree = $(".third-column");

function isElementInViewport(elem) {
  // Get the scroll position of the page.
  var scrollElem =
    navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? document : "html";

  var viewportTop = $(scrollElem).scrollTop();

  console.log(viewportTop);
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return elemTop < viewportBottom && elemBottom > viewportTop;
}

// Check if it's time to start the animation.
function checkAnimation() {

  // If the animation has already been started
  if (
    $elem.hasClass("first-column-start") ||
    $elemTwo.hasClass("second-column-start") ||
    $elemThree.hasClass("third-column-start")
  )
    return;


  if (isElementInViewport($elem)) {
    console.log("Hi");
    // Start the animation
    $elem.addClass("first-column-start");
    $elemTwo.addClass("second-column-start");
    $elemThree.addClass("third-column-start");
  }
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

视口高度差会中断滚动事件

1 个答案: