javascript - 使用 nicescroll 在水平滚动的元素上切换类

Question

我正在制作一个网站，我将在其中使用 Horizo​​ntal Scroll。我正在使用 jQuery.nicescroll 来实现平滑滚动。

$(function() { 
  var scroll = $(window).scrollLeft();
		if (scroll >= 0) {
  		$('#animateBtn').click(function(){
        $('.section-parent').addClass('half');
        // Smooth Scroll
        $('#js-slideContainer').niceScroll({
          cursorwidth: "0px",
          cursorborder: "5px solid transparent",
          scrollspeed: 260,
          smoothscroll: true
        });
      });
		}
   

    // Custom Cursor
      var follower, init, mouseX, mouseY, positionElement, printout, timer;
      follower = document.getElementById('follower');
      printout = document.getElementById('printout');
      mouseX = (function(_this) {
        return function(event) {
          return event.clientX;
        };
      })(this);
      mouseY = (function(_this) {
        return function(event) {
          return event.clientY;
        };
      })(this);
      positionElement = (function(_this) {
        return function(event) {
          var mouse;
          mouse = {
            x: mouseX(event),
            y: mouseY(event)
          };
          follower.style.top = mouse.y + 'px';
          return follower.style.left = mouse.x + 'px';
        };
      })(this);
      timer = false;
      window.onmousemove = init = (function(_this) {
        return function(event) {
          var _event;
          _event = event;
          return timer = setTimeout(function() {
            return positionElement(_event);
          }, 1);
        };
      })(this);
});

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
}
body {
	padding: 100px;
	margin: 0;
	background: #e2e1dc;
}
::-webkit-scrollbar {
  display: none;
}
.card {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.section-parent {
  width: 87.5vw;
  height: calc(100vh - 12.5vw);
  margin-right: 6.25vw;
  margin-bottom: 0;
  transition: width 1.6s cubic-bezier(.73,.01,.36,.99);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.section-bg {
  background: url("https://via.placeholder.com/700x300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.half {
  width: 49.7792vh;
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.grey {
  background-color: #bfbeb7;
}
.green {
	background-color: green;
}
.white-smoke {
  background-color: white-smoke;
}

.caption {
  text-align: center;
}


/*** Cursor ***/
html {
  cursor: none;
}
#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; 
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; 
  animation: pulse 4s infinite;
  background: rgba(200,0,0,0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://nicescroll.areaaperta.com/wp-content/plugins/jnicescroll/js/jquery.nicescroll.min.js"></script>
<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

<div class="card" id="js-slideContainer">
    <div class="section-parent">
      <div class="section-bg">
        <button type="button" id="animateBtn" class="animateBtn">Click Here</button>
      </div>   
    </div>
    <div class="section grey">
      <div class="caption">
        <h2>Some Heading</h2>
        <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
      </div>
    </div>  
    <div class="section green">
      <div class="caption">
        <h2>Other Heading</h2>
        <P>Error explicabo architecto iure, numquam quisquam dolores itaque quos aliquid laudantium eaque, voluptas.</P>
      </div>
    </div> 
  </div>

为了更好地理解，请在 Full View 中打开代码段。

这是 Fiddle

正如你在演示中看到的那样

.section-parent 将在 button 单击时添加一个类 .half。我想要的是在用户滚动回最左边时删除 .half 类，然后在滚动时再次添加类 .half 。这次动画应该在 button 上没有 click 的情况下执行。

引用，请查看此网站:villafeltrinelli

Answer 1

我添加了一个滚动功能并修改了你的滚动选择器

$(function() { 
  var scroll = $("#js-slideContainer").scrollLeft();
		if (scroll >= 0) {
  		$('#animateBtn').click(function(){
        $('.section-parent').addClass('half');
        // Smooth Scroll
        $('#js-slideContainer').niceScroll({
          cursorwidth: "0px",
          cursorborder: "5px solid transparent",
          scrollspeed: 260,
          smoothscroll: true
        });
      });
		}
   
  $("#js-slideContainer").scroll(function() {
    if ($("#js-slideContainer").scrollLeft() == 0) {
      $('.section-parent').removeClass('half');
    } else {
      $('.section-parent').addClass('half');
    }
  });    

    // Custom Cursor
      var follower, init, mouseX, mouseY, positionElement, printout, timer;
      follower = document.getElementById('follower');
      printout = document.getElementById('printout');
      mouseX = (function(_this) {
        return function(event) {
          return event.clientX;
        };
      })(this);
      mouseY = (function(_this) {
        return function(event) {
          return event.clientY;
        };
      })(this);
      positionElement = (function(_this) {
        return function(event) {
          var mouse;
          mouse = {
            x: mouseX(event),
            y: mouseY(event)
          };
          follower.style.top = mouse.y + 'px';
          return follower.style.left = mouse.x + 'px';
        };
      })(this);
      timer = false;
      window.onmousemove = init = (function(_this) {
        return function(event) {
          var _event;
          _event = event;
          return timer = setTimeout(function() {
            return positionElement(_event);
          }, 1);
        };
      })(this);
});

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
}
body {
	padding: 100px;
	margin: 0;
	background: #e2e1dc;
}
::-webkit-scrollbar {
  display: none;
}
.card {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.section-parent {
  width: 87.5vw;
  height: calc(100vh - 12.5vw);
  margin-right: 6.25vw;
  margin-bottom: 0;
  transition: width 1.6s cubic-bezier(.73,.01,.36,.99);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.section-bg {
  background: url("https://via.placeholder.com/700x300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.half {
  width: 49.7792vh;
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.grey {
  background-color: #bfbeb7;
}
.green {
	background-color: green;
}
.white-smoke {
  background-color: white-smoke;
}

.caption {
  text-align: center;
}


/*** Cursor ***/
html {
  cursor: none;
}
#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; 
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; 
  animation: pulse 4s infinite;
  background: rgba(200,0,0,0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://nicescroll.areaaperta.com/wp-content/plugins/jnicescroll/js/jquery.nicescroll.min.js"></script>
<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

<div class="card" id="js-slideContainer">
    <div class="section-parent">
      <div class="section-bg">
        <button type="button" id="animateBtn" class="animateBtn">Click Here</button>
      </div>   
    </div>
    <div class="section grey">
      <div class="caption">
        <h2>Some Heading</h2>
        <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
      </div>
    </div>  
    <div class="section green">
      <div class="caption">
        <h2>Other Heading</h2>
        <P>Error explicabo architecto iure, numquam quisquam dolores itaque quos aliquid laudantium eaque, voluptas.</P>
      </div>
    </div> 
  </div>