Question

当光标位于顶部的蓝色块上方时无法滚动，任何关于我哪里出错的想法？

HTML

<div class="wrapper">
    <div class="block">
        block
    </div>

    <div class="content">
        content
    </div>
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
.block {
    background: blue;
    height: 300px;
    width: 100%;
    position: fixed;
}
.content {
    background: red;
    margin-top: 300px;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    position: absolute;
}
.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

JS

$(".wrapper").scrollTop(300);

Answer 1

您使用了css position: Fixed;，因此类block不会从其位置移动，滚动条将无法在mousehover事件

上运行

<强> HTML

<div class="wrapper">
    <div class="block">
        block
        </div>

    <div class="content">
        content
    </div>

 </div>

<强> CSS

body {
    margin: 0px;
    padding: 0px;
}
.block {
    background: blue;
    height: 300px;
    width: 100%;
    position: absolute;
}
.content {
    background: red;
    margin-top: 300px;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    position: absolute;
}
.wrapper {
    background: #ccc none repeat scroll 0 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

<强> JS

$( ".wrapper" ).scrollTop( 300 );

这里是fiddle

Answer 2

由于你有为类块固定的位置，它将阻止滚动条工作。所以改变类块的位置。

Answer 3

删除包装div并将“body”添加到javascript

更新 http://jsfiddle.net/cr8uj/7/

<强> JS

$( "body" ).scrollTop( 300 );

Answer 4

please do not use fixed property on .block class

body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}

无法滚动顶部div

4 个答案: