Ich möchte auf einer Website in einer Box (DIV) ein ganz langes Bild scrollen.
z. B. wenn das Bild eine Höhe von 5000 px hat und eine Breite von 700 px
nun möchte ich eine Box auf der Website haben (z. B. 700 breit und 500 hoch) WORIN dieses Bild man von oben bis zum Ende "scrollen" kann
und der Rest der Seite soll aber nicht mit scrollen.
Hoffe ich habe es verständlich geschrieben, was ich meine
Geht das und wenn ja, wäre lieb, wenn ihr mir da helfen könnt, wie ich das „bauen“ muss.
Code
<!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
.small{
height:300px;
width:300px;
margin:20px auto;
border:3px solid black;
overflow:hidden;
cursor:pointer;
}
.big{
position:fixed;
top:20px;
left:20px;
width:calc(100vw - 40px);
height:calc(100vh - 40px);
overflow:hidden;
border:2px solid red;
}
.small #gross{
display:none;
}
#gross img{
width:100%;
}
.big #gross{
width:100%;
display:block;
overflow:scroll;
}
.big .img2,.big .img3,.big .img1{
display:none;
}
div.img{
background-image:url('/image/europa.jpg');
width:33%;
background-repeat:no-repeat;
height:100%;
background-size:100% 300%;
border:1px solid blue;
}
div.img1{
background-position:0 0;
}
div.img2{
background-position:0 50%;
}
div.img3{
background-position:0 100%;
}
#box{
display:flex;
}
</style>
</head>
<body>
<div class="small" id="box">
<div id="gross">
<img src="/image/europa.jpg">
</div>
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
<script>
$(document).ready(function() {
$("#box").click(function(){
cla=$(this).hasClass('small');
if(cla==true){
$(this).removeClass('small');
$(this).addClass('big');
}else{
$(this).addClass('small');
$(this).removeClass('big');
}
});
});
</script>
</body>
</html>