Question

嗨，我想通过使用鼠标滚轮在滑动器上构建自定义水平滚动，例如[https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html#firstPage/1] plz，请检查我的鼠标滚轮，它是否工作正常。当我在幻灯片3（滑块部分）上并向下滚动时，它会转到第4部分；但当我在滑块1（滑块部分）上并向上滚动时，则它不会到第2部分。我提到的PLZ检查链接，那么你会理解面糊。

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"	></script>
<style>

.section {
    padding: 200px 20px;
    background-color: #009688;
    margin-bottom:  50px;
    font-size: 20px;
    text-align: justify;
}


.swiper-container {
    height: 100vh; text-align: center; font-size: 100px; color: #fff;
} 
.swiper-slide {
   background-color: purple;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
</style>
<div class="section section1">

	<h1>section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p>
</div>
<div class="section section2"> 	<h1>section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p>
</div>
<div class="section section3" id="section3"> 	<h1>section 3</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi harum deleniti assumenda accusamus similique. Obcaecati magnam adipisci dolorem dolores unde molestiae, mollitia quos nam ullam commodi, vero saepe, assumenda autem!</h2>

</div>
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide blue ">Slide 2</div>
        <div class="swiper-slide red">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- If we need scrollbar -->
<!--     <div class="swiper-scrollbar"></div> -->
</div>
<div class="section section4"> 	<h1>section 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi quas rerum cum optio! Saepe recusandae labore, minima mollitia nihil non, laboriosam, blanditiis accusamus aut quam repudiandae. Unde corrupti, veritatis.</p>
</div>
<script>
  var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
speed: 500,
autoplay: false,
mousewheelControl: true,
loop: false,
mouseDrag:false,
autoResize: true
})
mySwiper.on('slideChangeEnd', function () {
if (mySwiper.isEnd) { 
	$('html, body').animate({
        scrollTop: $('.section4').offset().top
    }, 'slow');  
        }
});
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
jQuery( document ).ready(function( $ ) {
$( ".delay-load" ).delay(300).fadeTo(2200, 1);
});
</script>


<script>
$(".section3").bind('mousewheel', function(e){
    if(e.originalEvent.deltaY > 10)
    {
	$('html, body').animate({
        scrollTop: $('.swiper-container').offset().top
    }, 'slow');  
        }
        else{
        }
});
</script>


</body></html>

如何水平构建自定义滚动

0 个答案: