我正在尝试制作具有滚动效果的页面。 我隐藏了滚动条，但它仍在滚动，
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: none;
}
然后我使用 JQuery 进行背景转换。 我添加了两个背景。 当我滚动到最后一个时，会有底部空间。 它要么是边距，要么是填充。
当我检查元素时，问题出在 <html> .
html
<div class="main-sec">
<div class="page1" id="p1">
<div class="item1">
<h2>Sample content1</h2>
</div>
<div class="item2">
<h2>Sample content2</h2>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Lobster');
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: none;
}
.main-sec {
}
.page1 {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
.item1, .item2 {
text-align: left;
}
.item1 h2, .item2 h2 {
color: #fff;
padding: 10% 0 0 10%;
font-size: 52px;
font-family: 'Lobster', cursive;
margin-block-start: 0em;
margin-block-end: 0em;
text-shadow: 2px 2px 18px #000;
}
**Jquery
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('.page1').css({"background":"url(https://images.pexels.com/photos/58625/pexels-photo-58625.jpeg?auto=compress&cs=tinysrgb&h=650&w=940)","background-size":"cover","background-repeat":"no-repeat"});
//alert('downscrll');
//down
} else {
$('.page1').css({"background":"url(https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg?auto=compress&cs=tinysrgb&h=650&w=940)","background-size":"cover","background-repeat":"no-repeat"});
//alert('upscrll');
//up
}
lastScrollTop = st;
});
谁能帮帮我..
是我屏幕的问题吗？
最佳答案
您需要将 html 元素 CSS 更改为
html {
overflow: auto;
}
关于javascript - 溢出 : scroll results bottom margin，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52853440/