更改滚动页面部分

我想要更改滚动部分，以消除单个页面网站的溢出并更改滚动时高度为100％的部分。我尝试使用：更改滚动页面部分

https://github.com/hellsan631/angular-fullpage.js

，但不能使它工作。当我遵守所有的指示，我得到了以下错误：

Error: [$compile:nonassign] http://errors.angularjs.org/1.6.6/$compile/nonassign?p0=undefined&p1=options&p2=fullPage 

angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined 

angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined

我也使用https://github.com/alvarotrigo/fullPage.js试过了，没有错误，但没有任何反应。

任何人都有不同的解决方案，或解决这个问题的方法？谢谢。

来源

2017-10-18 Nemanja Grabovac

这里是一个组队，探索内容滑动插件，类似fullpage.js：
http://idangero.us/swiper/demos/20-mousewheel-control.html

你可以使用鼠标滚轮，鼠标（桌面触摸仿真），键盘（台式机），并指（在触摸设备上滚动它）。另外还有一个非JQuery版本可用。

此外，你甚至可以将其配置为改变网页背景颜色，如：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Swiper demo</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css"> 
<style> 
    html, body { 
     position: relative; 
     height: 100%; 
    } 
    body { 
     background: #eee; 
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     color:#000; 
     margin: 0; 
     padding: 0; 
    } 
    .swiper-container { 
     width: 100%; 
     height: 100%; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    .swiper-slide { 
     text-align: center; 
     font-size: 18px; 
     background: transparent; 

     /* Center slide text vertically */ 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     align-items: center; 
    } 

    body { 
     transition: background-color .5s ease-in-out; 
    } 

    body.red { 
     background-color: #f40; 
    } 

    body.orange { 
     background-color: #f90; 
    } 

    body.yellow { 
     background-color: #fe0; 
    } 
    </style> 
</head> 
<body> 

<!-- Slider main container --> 
<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide" data-bg="red">Slide 1</div> 
     <div class="swiper-slide" data-bg="orange">Slide 2</div> 
     <div class="swiper-slide" data-bg="yellow">Slide 3</div> 
    </div> 
    <div class="swiper-pagination"></div> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script> 
<script> 
var body = document.body; 
body.className = 'red'; 
var slider = new Swiper ('.swiper-container', { 
    pagination: '.swiper-pagination', 
    direction: 'vertical', 
    slidesPerView: 1, 
    paginationClickable: true, 
    spaceBetween: 30, 
    mousewheelControl: true, 
    onSlideChangeStart: function (swiper) { 
     var currentSlide = swiper.slides[ swiper.activeIndex ]; 
     body.className = currentSlide.getAttribute('data-bg'); 
     console.log(currentSlide.getAttribute('data-bg')); 
    }, 
}); 
</script> 
</body> 
</html>

DEMO

来源

2017-10-18 09:44:28

更改滚动页面部分

回答

相关问题