在正在运行的网站上，我希望用户滚动并单击图标以“打开”它们。例如，如果用户单击“关于我们”图标，则会有一段信息可以在其中滚动并下文字以及后退按钮。后退按钮会将用户带回到该图标，他们可以再次滚动以选择另一个图标。尽管由于我用段落div替换了图标div（单击“关于”图标时），所以当我返回时，我必须创建图标所在的中间div的新实例。它们显示了，尽管我无法滚动它们。
document.body.style.overflow = "hidden";
//the key strokes for the up and down keys
// Set up our container
const el = document.querySelector("#theMiddle");
// Create new SlotMachine
const slot = new SlotMachine(el, {});
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
//Secret Code: EADWEARD
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
if (e.keyCode == "40") {
//this is down
//this will open it up
console.log("down");
slot.prev();
} else if (e.keyCode == "38") {
console.log("up");
slot.next();
}
}
//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
//This is for the scrolling down
// animation opens up the brakets
slot.prev();
}
if (delta > 0) {
slot.next();
}
});
//this is for detecting clicks for the divs in the middle div
// 1 = the 2nd image , 2 = the 3rd image
$(".middle div").click(function(){
if($(this).index() == '1'){
$('#aboutID').fadeOut("slow", function(){
var div = $("<p id='foo'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> ").hide();
$('#theMiddle').replaceWith(div);
$('#foo').fadeIn("slow");
var btn = document.createElement("BUTTON"); // Create a <button> element
btn.className = 'backButton';
btn.id ='backButtonID';
var text = document.createTextNode("Back"); // Create a text node
btn.appendChild(text); // Append the text to <button>
document.body.appendChild(btn); // Append <button> to <body>
//Define the event handler here after the btn has been created
$("#backButtonID").click(function(){
$('#foo').fadeOut("slow", function(){
var div1 = $('<div class="middle" id = "theMiddle" style="width: 400px; height: 300px"><div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt="" class="icons" id="aboutID"></div><div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt="" class="icons" id="jobID"></div><div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" alt="" class="icons" id="middleID"></div></div>');
$('#foo').replaceWith(div1);
$(div1).fadeIn("slow");
const el = document.querySelector("#theMiddle");
const slot = new SlotMachine(el, {});
$("#backButtonID").fadeOut("slow",function() {
});
});
});
});
}if($(this).index() == '2'){
}
});.box{
position: relative;
width: 100px;
height: 100px;
margin: 4px;
display: inline-block;
}
div.left {
position: absolute;
left: 390px;
}
div.middle {
position: absolute;
left: 490px;
top: 150px;
}
div.right {
position: absolute;
left: 870px;
}
#left,#right{
width: 290px;
float: left;
}
#middle{
width: auto;
float: left;
}
#theMiddle{
left: 490px;
top: 150px;
}
#foo {
position: absolute;
height: 300px;
width: 400px;
left: 490px;
top: 100px;
overflow-y: scroll
}
.backButton{
position: absolute;
height: 20px;
width: 70px;
left: 490px;
top: 90px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Underscores</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/jquery.slotmachine.min.css"></style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id= "left" class="left">
<img src="https://s3.amazonaws.com/underscores.xyz/images/left.png" alt="">
</div>
<div class="middle" id = "theMiddle" style="width: 400px; height: 300px">
<div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt="" class="icons" id="aboutID"></div>
<div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt="" class="icons" id="jobID"></div>
<div><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" alt="" class="icons" id="middleID"></div>
</div>
<div id= "right" class="right"><img src="https://s3.amazonaws.com/underscores.xyz/images/right.png" alt=""></div>
<script src="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/slotmachine.min.js"></script>
<script src="back.js" charset="utf-8"></script>
</body>
</html>