无法获取滚动条，尝试很多种方法都不行，帮我看看为什么

无法获取滚动条，尝试很多种方法都不行，帮我看看为什么

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>H5单页</title>

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/animate.css">


</head>


<body>

<!-- top -->

<header class="header">

<div class="header__wrap">

<div class="header__logo">某牌手机</div>

<nav class="header__nav">

<a href="javascript:;" class="header__nav-item">首页</a>

<a href="javascript:;" class="header__nav-item">外观</a>

<a href="javascript:;" class="header__nav-item">配置</a>

<a href="javascript:;" class="header__nav-item">型号</a>

<a href="javascript:;" class="header__nav-item">说明</a>

<a href="javascript:;" class="header__nav-item header__nav-item-custom-button">立即购买</a>

</nav>

</div>

</header>

<!-- 第一屏 -->

<div class="screen-1" id="screen1">

<div class="screen-1-heading"><span>某牌手机 </span>让你的生活更精彩</div>

<div class="screen-1-phone"></div>

<div class="screen-1-shadow"></div>

</div>

<!-- 第二屏 -->

<div class="screen-2" id="screen2">

<div class="screen-2__heading">优美的设计，更让人着迷</div>

<div class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br>

款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。

</div>

<div class="screen-2__phone">

<div class="screen-2__point-1">高清摄像</div>

<div class="screen-2__point-2">超薄机身</div>

<div class="screen-2__point-3">大屏显示</div>

</div>

</div>

<!-- 第三屏 -->

<div class="screen-3" id="screen3">

<div class="screen-3-wrap">

<div class="screen-3__heading">外形小巧，功能强大的手机</div>

<div class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br>

款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。

</div>

<div class="screen-3__phone"></div>

<div class="screen-3__label">

<div class="screen-3__label-item">

<span class="screen-3__label-item-1">5.7</span>

<span class="screen-3__label-item-2">英寸大屏</span>

</div>

<div class="screen-3__label-item">

<span class="screen-3__label-item-1">1200</span>

<span class="screen-3__label-item-2">万像素</span>

</div>

<div class="screen-3__label-item">

<span class="screen-3__label-item-1">3D</span>

<span class="screen-3__label-item-2">Touch</span>

</div>

<div class="screen-3__label-item">

<span class="screen-3__label-item-1">A9</span>

<span class="screen-3__label-item-2">处理器</span>

</div>

</div>

</div>

</div>

<!-- 第四屏 -->

<div class="screen-4" id="screen4">

<div class="screen-4__heading">丰富的手机型号</div>

<div class="screen-4__subheading">找到适合你的手机</div>

<div class="screen-4__phone">

<div class="screen-4__phone-item red-phone">

<p>天然红</p>

<span>32G/64G/128G</span>

</div>

<div class="screen-4__phone-item golden-phone">

<p>土豪金</p>

<span>32G/64G/128G</span>

</div>

<div class="screen-4__phone-item gray-phone">

<p>太空灰</p>

<span>32G/64G/128G</span>

</div>

<div class="screen-4__phone-item black-phone">

<p>绅士黑</p>

<span>32G/64G/128G</span>

</div>

</div>

</div>

<!-- 第五屏 -->

<div class="screen-5" id="screen5">

<div class="screen-5__heading">游戏、学习、拍照，有这一部就够了</div>

<div class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、

通话相结合，一机多功能，让您生活更丰富精彩。</div>

<div class="screen-5__phone"></div>

</div>

<!-- buy -->

<div class="buy">

<a href="javascript:;">立即购买</a>

</div>

<!-- footer -->

<div class="footer">© 2016 imooc.com 京ICP备13046642号</div>


<!-- 侧边导航 -->


<div class="out-line">

<a href="javascript:;" class="out-line-item">首页</a>

<a href="javascript:;" class="out-line-item">外观</a>

<a href="javascript:;" class="out-line-item">配置</a>

<a href="javascript:;" class="out-line-item">型号</a>

<a href="javascript:;" class="out-line-item">说明</a>

</div>


<!-- <script src="js/test.js"></script> -->

<script src="js/index.js"></script>

</body>


</html>





js文件内容如下


// 获取元素


var getElem = function( selector ){

return document.querySelector(selector);

}

var getAllElem = function( selector ){

return document.querySelectorAll(selector);

}

// 获取元素的样式

var getCls = function ( element ) {

return element.getAttribute('class');

}

// 设置元素的样式

var setCls = function( element ,cls){

return element.setAttribute('class',cls);

}

// 为元素添加样式

var addCls = function( element , cls ){

var baseCls  = getCls(element);

if( baseCls.indexOf(cls) === -1){

setCls(element,baseCls+' '+cls); // 注意空格

}

return ;

}

// 为元素删减样式

var delCls = function( element , cls){

var baseCls  = getCls(element);

if( baseCls.indexOf(cls) > -1){ // 更精确的需要用正则表达式 ,因为这里只用于切换 _animate_in 所以没事

setCls( element,baseCls.split(cls).join(' ').replace(/\s+/g,' ') );

}

return ;

}


var screenAnimateElements = {

".screen-1": [

".screen-1-heading",

".screen-1-phone",

".screen-1-shadow"

],

".screen-2": [

".screen-2__heading",

".screen-2__subheading",

".screen-2__phone",

".screen-2__point-1",

".screen-2__point-2",

".screen-2__point-3"

],

".screen-3": [

".screen-3__heading",

".screen-3__subheading",

".screen-3__phone",

".screen-3__label"

],

".screen-4": [

".screen-4__heading",

".screen-4__subheading",

".red-phone",

".golden-phone",

".gray-phone",

".black-phone"

],

".screen-5": [

".screen-5__heading",

".screen-5__subheading",

".screen-5__phone"

]

}


//为所有具有动画效果的元素初始化样式，添加animate_init


function setAllElementInit(element) {

var animateElements = screenAnimateElements[element]; //获取需要设置动画的元素

for (var i = 0, len = animateElements.length; i < len; i++) {

var element = document.querySelector(animateElements[i]);

var baseclass = element.getAttribute('class');

element.setAttribute("class", baseclass + ' ' + baseclass + '_animate_init');

}

}


//加载完页面之后添加

window.onload = function () {

for (x in screenAnimateElements) {

if (x === ".screen-1") {

continue;

} else {

setAllElementInit(x);

}

}

}

//当滚动提条到指定位置时执行动画，更改类名animate_done


function setAllElementDone(element) {

var animateElements = screenAnimateElements[element]; //获取需要设置动画的元素

for (var i = 0, len = animateElements.length; i < len; i++) {

var element = document.querySelector(animateElements[i]);

var baseclass = element.getAttribute('class');

element.setAttribute("class", baseclass.replace("_init", "_done"));

}

}



window.scroll = function () {

var top = document.documentElement.scrollTop || document.body.scrollTop;

console.log(top);

}




css样式内容


* {

margin: 0 auto;

padding: 0;

border: 0;

font-family: "Microsoft YaHei";

}

body{

background-color: #fff;

    margin: 0;

    padding: 0;

    font-size: 12px;

    font-family: "Microsoft Yahei",微软雅黑

}


/* BEM设计模式

模块 （没有前缀，多个单词用-连接）

元素 （元素在模块之后，可以有多个层级，以__连接）

修饰（某元素、或者某模块特别的状态 ，必须有一个状态名和状态值，使用_连接）

*/


a {

text-decoration: none;

}


.header {

width: 100%;

height: 80px;

position: fixed;

top: 0;

background-color: rgba(100, 100, 100, 0.5);

z-index: 3;

}


.header__wrap {

margin: 0 auto;

height: 80px;

width: 1200px;

position: relative;

}


.header__logo {

background-image: url(../img/logo.png);

background-position: left center;

background-repeat: no-repeat;

line-height: 40px;

position: absolute;

top: 50%;

left: 20px;

margin-top: -20px;

padding-left: 50px;

font-size: 28px;

color: #fff;

}


.header__nav {

height: 40px;

position: absolute;

right: 20px;

top: 50%;

margin-top: -20px;

}


.header__nav-item {

display: block;

height: 40px;

line-height: 40px;

color: #fff;

margin-left: 40px;

float: left;

font-size: 14px;

}


.header__nav-item:hover {

color: red;

}


.header__nav-item-active {

color: red;

}


.header__nav-item-active::after {

content: "";

width: 28px;

height: 2px;

background-color: red;

position: absolute;

bottom: 0;

left: 40px;

border-radius: 1px;

}


.header__nav-item-custom-button {

padding: 0 20px;

background-color: #000;

color: #f4f4f4;

text-align: center;

border-radius: 2px;

}


.header__nav-item-custom-button:hover {

color: #fff;

}


/* 第一屏 */


.screen-1 {

margin-top: 80px;

height: 880px;

background-image: url(../img/bg-screen-1.png);

background-size: cover;

position: relative;

overflow: hidden;

}


.screen-1-heading {

font-size: 46px;

color: #4d555d;

text-align: center;

padding-top: 155px;

}


.screen-1-heading span {

color: #f01414;

}


.screen-1-phone {

background: url(../img/screen-1-phone.png) no-repeat center;

width: 1375px;

height: 305px;

position: absolute;

left: 50%;

margin-left: -687px;

top: 314px;

z-index: 2;

}


.screen-1-shadow {

background: url(../img/screen-1-shadow.png) no-repeat center;

width: 1233px;

height: 411px;

position: absolute;

left: 50%;

margin-left: -616px;

top: 387px;

opacity: .4;

z-index: 1;

}


/* 第二屏 */


.screen-2 {

height: 940px;

position: relative;

overflow: hidden;

background-color: #fafafa;

}


.screen-2__heading {

font-size: 48px;

color: #f01414;

text-align: center;

padding-top: 96px;

line-height: 48px;

}


.screen-2__subheading {

font-size: 16px;

color: #07111b;

text-align: center;

padding-top: 15px;

line-height: 28px;

}


.screen-2__phone {

width: 928px;

height: 873px;

background: url(../img/screen-2-phone.png) no-repeat center;

position: absolute;

left: 50%;

margin-left: -464px;

top: 270px;

}


.screen-2__point-1 {

color: #4d555d;

height: 24px;

line-height: 24px;

font-size: 24px;

padding-right: 112px;

background: url(../img/icon-point-right.png) no-repeat center right;

position: absolute;

top: 156px;

left: -150px;

}


.screen-2__point-2, .screen-2__point-3 {

color: #4d555d;

height: 24px;

line-height: 24px;

font-size: 24px;

padding-left: 112px;

background: url(../img/icon-point-left.png) no-repeat center left;

position: absolute;

}


.screen-2__point-2 {

top: 38px;

right: 140px;

}


.screen-2__point-3 {

top: 340px;

right: 38px;

}


/* 第三屏 */


.screen-3 {

height: 940px;

position: relative;

overflow: hidden;

background: url(../img/bg-screen-3.png) no-repeat center;

background-size: cover;

}


.screen-3-wrap {

width: 1200px;

position: relative;

}


.screen-3__heading {

font-size: 48px;

color: #fff;

text-align: left;

padding-top: 96px;

line-height: 48px;

}


.screen-3__subheading {

font-size: 16px;

color: #fff;

text-align: left;

padding-top: 15px;

line-height: 28px;

}


.screen-3__phone {

width: 729px;

height: 900px;

background: url(../img/screen-3-phone.png) no-repeat center;

position: absolute;

right: 0;

top: 200px;

}


.screen-3__label {

position: absolute;

top: 400px;

left: 0;

width: 330px;

}


.screen-3__label-item {

width: 130px;

height: 110px;

border-radius: 4px;

border: solid 1px rgba(255, 255, 255, 0.4);

float: left;

margin: 10px;

padding-top: 10px;

}


.screen-3__label-item span {

width: 140px;

text-align: center;

display: block;

color: #fff;

font-weight: 100;

}


.screen-3__label-item-1 {

font-size: 48px;

}


.screen-3__label-item-2 {

font-size: 16px;

}


/* 第四屏 */


.screen-4 {

height: 940px;

position: relative;

overflow: hidden;

background-color: #fafafa;

}


.screen-4__heading {

font-size: 48px;

color: #f01414;

text-align: center;

padding-top: 110px;

line-height: 48px;

}


.screen-4__subheading {

font-size: 16px;

color: #07111b;

text-align: center;

padding-top: 20px;

line-height: 28px;

padding-bottom: 70px;

}


.screen-4__phone {

width: 1200px;

height: 350px;

margin-top: 50px;

}


.screen-4__phone-item {

float: left;

width: 300px;

position: relative;

}


.screen-4__phone-item p {

padding-top: 300px;

text-align: center;

font-size: 16px;

color: #07111b;

}


.screen-4__phone-item span {

text-align: center;

font-size: 12px;

color: #93999f;

position: absolute;

left: 50%;

margin-left: -42px;

width: 84px;

padding-top: 5px;

}


.red-phone {

background: url(../img/phone-1.png) no-repeat top center;

}


.golden-phone {

background: url(../img/phone-2.png) no-repeat top center;

}


.gray-phone {

background: url(../img/phone-3.png) no-repeat top center;

}


.black-phone {

background: url(../img/phone-4.png) no-repeat top center;

}


/* 第五屏 */


.screen-5 {

height: 940px;

position: relative;

overflow: hidden;

background-color: #d9dde1;

}


.screen-5__heading {

font-size: 48px;

color: #f01414;

text-align: center;

padding-top: 96px;

line-height: 48px;

}


.screen-5__subheading {

font-size: 16px;

color: #07111b;

text-align: center;

padding-top: 15px;

line-height: 28px;

}


.screen-5__phone {

width: 2688px;

height: 572px;

background: url(../img/bg-screen-5.png) no-repeat center;

background-size: cover;

position: absolute;

bottom: 0;

left: 50%;

margin-left: -1344px;

}


/* buy */


.buy {

height: 320px;

background: url(../img/bg-screen-buy.png) no-repeat center;

background-size: cover;

position: relative;

}


.buy a {

display: block;

width: 240px;

height: 80px;

background-color: #f01414;

border-radius: 4px;

color: #fff;

text-align: center;

font-size: 24px;

line-height: 80px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -40px;

margin-left: -120px;

}


/* footer */


.footer {

background-color: #07111b;

text-align: center;

height: 80px;

line-height: 80px;

color: #fff;

}


/* 侧边导航 */


.out-line {

width: 60px;

height: 240px;

position: fixed;

right: 0;

top: 50%;

margin-top: -120px;

background-color: #fff;

box-shadow: 0 2px 6px rgba(100, 100, 100, 0.6);

z-index: 2;

}


.out-line-item {

width: 40px;

height: 47px;

border-bottom: 1px solid rgba(220, 220, 220, 0.6);

display: block;

color: #4d555d;

text-align: center;

line-height: 47px;

font-size: 12px;

}


.out-line-item:last-child {

border-bottom: none;

}


.out-line-item:hover {

color: #f01414;

}




动画css

/* 第一屏动画 */

.screen-1-heading,

.screen-1-phone,

.screen-1-shadow{

transition: all 1s;

}


.screen-1-heading_animate_init,

.screen-1-shadow_animate_init{

opacity: 0;

transform: translate(0,100%);

}


.screen-1-heading_animate_done,

.screen-1-phone_animate_done{

opacity: 1;

transform: translate(0,0);

}


.screen-1-shadow_animate_done{

opacity: 0.4;

transform: translate(0,0);

}

.screen-1-phone_animate_init{

opacity: 0;

transform: translate(0,-100%);

}


/* 第二屏动画 */

.screen-2__heading,

.screen-2__subheading,

.screen-2__phone{

transition: all 1s;

}


.screen-2__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-2__subheading_animate_init,

.screen-2__phone_animate_init{

opacity: 0;

transform: translate(0,100%);

}


.screen-2__heading_animate_done,

.screen-2__point-1_animate_done,

.screen-2__point-2_animate_done,

.screen-2__point-3_animate_done,

.screen-2__subheading_animate_done,

.screen-2__phone_animate_done{

opacity: 1;

transform: translate(0,0);

}

.screen-2__point-1,

.screen-2__point-2,

.screen-2__point-3{

transition: all .5s 1s;

}


.screen-2__point-1_animate_init{

opacity: 0;

transform: translate(-100%,0);

}


.screen-2__point-2_animate_init,

.screen-2__point-3_animate_init{

opacity: 0;

transform: translate(100%,0);

}


.screen-2__point-1::after{

content: "";

position: absolute;

display: block;

right: 5px;

top: 8px;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: rgba(255, 0, 0, .3);

animation: pointLar 1s infinite;

}

.screen-2__point-2::before{

content: "";

position: absolute;

display: block;

left: 5px;

top: 8px;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: rgba(255, 0, 0, .3);

animation: pointLar 1s infinite;

}

.screen-2__point-3::before{

content: "";

position: absolute;

display: block;

left: 5px;

top: 8px;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: rgba(255, 0, 0, .3);

animation: pointLar 1s infinite;

}


@keyframes pointLar{

from{transform: scale(1)}

to{transform: scale(2)}

}



/* 第三屏动画 */

.screen-3__heading,

.screen-3__subheading,

.screen-3__phone,

.screen-3__label{

transition: all 1s;

}


.screen-3__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-3__subheading_animate_init,

.screen-3__phone_animate_init{

opacity: 0;

transform: translate(0,100%);

}


.screen-3__heading_animate_done,

.screen-3__subheading_animate_done,

.screen-3__phone_animate_done{

opacity: 1;

transform: translate(0,0);

}


.screen-3__label_animate_init{

opacity: 0;

transform: scale(.2);

}

.screen-3__label_animate_done{

opacity: 1;

transform: scale(1);

}

.screen-3__label-item:hover{

transform: scale(1.2);

border:1px solid #fff;

cursor: pointer;

}

.screen-3__label-item{

transition: all 0.5s;

}


/* 第四屏动画 */

.screen-4__heading,

.screen-4__subheading{

transition: all 1s;

}


.screen-4__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-4__subheading_animate_init{

opacity: 0;

transform: translate(0,100%);

}


.screen-4__heading_animate_done,

.screen-4__subheading_animate_done,

.red-phone_animate_done,

.golden-phone_animate_done,

.gray-phone_animate_done,

.black-phone_animate_done{

opacity: 1;

transform: translate(0,0);

}


.red-phone{

transition: all 1s;

}

.golden-phone{

transition: all 1s 0.5s;

}

.gray-phone{

transition: all 1s 1s;

}

.black-phone{

transition: all 1s 1.5s;

}


.red-phone_animate_init,

.golden-phone_animate_init,

.gray-phone_animate_init,

.black-phone_animate_init{

opacity: 0;

}


/* 第五屏动画 */

.screen-5__heading,

.screen-5__subheading,

.screen-5__phone{

transition: all 1s;

}


.screen-5__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-5__subheading_animate_init,

.screen-5__phone_animate_init{

opacity: 0;

transform: translate(0,100%);

}


.screen-5__heading_animate_done,

.screen-5__subheading_animate_done,

.screen-5__phone_animate_done{

opacity: 1;

transform: translate(0,0);

}
慕妹0054739 2019-07-01
源自：宣传页项目   5-5 JS实现滑动门效果
1
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕慕子 回答被采纳获得+3积分 2019-07-02 13:40:30

同学你好， 这个是浏览器的解析的问题， （1）对于没有使用doctype声明的页面可以使用document.body.scrollTop获取scollTop的高度， （2）对于有使用doctype声明的页面可以使用document.documentElement.scrollTop获取scollTop的高度。 

scrollTop的获取存在兼容性问题，所以为了解决各种兼容性， 推荐同学使用兼容性的语法获取scrollTop的高度

http://img1.sycdn.imooc.com//climg/5d1aee420001b7d808840130.jpg

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~




0
收起回答
好帮手慕慕子 2019-07-02 11:06:36

同学你好， 因为你这里绑定事件的方法写错了，所以没有获取到滚动的位置。

建议修改：

http://img1.sycdn.imooc.com//climg/5d1aca200001a92208610153.jpg

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~

0
收起回答
  • 提问者 慕妹0054739 #1
    嗯，确实写错了，但不是这个原因导致的。 找到原因了，是因为html文件的<!DOCTYPE html>导致的。 必须删除<!DOCTYPE html>才能直接获取scrollTop； 至于为什么会这样我不清楚。没有找到相关资料。
    2019-07-02 12:29:52
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

获取不了滚动条的高度
3 2 8
老师请问为什么为这段代码，读取到的topNum值一直为0？
15 0 3
更新滚动条的两种方法
4 0 1
为什么一定要判断mappingInfo是否为空
76 0 3
第一张方法和第二种方法个执行2次为什么不是两万元记录?还有就是第一种方法...
3 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师