javascript - 你怎么能允许在一个div中滚动一个div

Question

我一直在尝试向位于 div 中的 div 添加滚动。我曾尝试通过 CSS 添加，但没有奏效。当用户进入网站时，他们可以向下或向上滚动到一个图标，然后单击它打开它以获取信息。例如，如果用户单击“关于我们”图标，它将有一段信息，他们可以在其中上下滚动文本。我无法弄清楚如何创建该滚动条。相反，文本会自动切断/调整。我试过使用 style="overflow-y: scroll; height:400px;" 虽然没有用。

发生了什么: https://gyazo.com/8d89a1e560393f8352a42b5912171fed

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;
  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
    slot.prev();

  } else if (e.keyCode == "38") {
    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') {
    console.log("the fucks");

    $('#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();
      $(this).replaceWith(div);
      $('#foo').fadeIn("slow");
    });



  }
  if ($(this).index() == '2') {
    console.log("jobs page");
  }
});

.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;
}

<!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>

Answer 1

希望这会有所帮助(以整页模式运行代码段):

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;
  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
    slot.prev();

  } else if (e.keyCode == "38") {
    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();
      $(this).replaceWith(div);
      $('#foo').fadeIn("slow");
    });



  }
  if ($(this).index() == '2') {
    console.log("jobs page");
  }
});

body {
  display: flex;
  justify-content: center;
  align-items: center
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 4px;
  display: inline-block;
}

#middle {
  width: 280px;
  float: left;
}

#foo {
  height: 270px;
  overflow-y: scroll
}

<!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">
  <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>