我如何编写一个事件，在纯JavaScript中单击并拖动以水平和垂直滚动？_Javascript_Html_Css

我如何编写一个事件，在纯JavaScript中单击并拖动以水平和垂直滚动？

javascript html css

我如何编写一个事件，在纯JavaScript中单击并拖动以水平和垂直滚动？,javascript,html,css,Javascript,Html,Css,我正在尝试解决如何能够在我的主容器内单击并拖动以向左和向右以及向上和向下滚动内容。我有它的左右部分工作，但我不确定为什么它不工作的向上和向下，任何帮助将不胜感激 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont

我正在尝试解决如何能够在我的主容器内单击并拖动以向左和向右以及向上和向下滚动内容。我有它的左右部分工作，但我不确定为什么它不工作的向上和向下，任何帮助将不胜感激

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<!-- Bring in my stylesheet -->    
     <link rel="stylesheet" href="src/assets/css/portfolio-a.css">

     <title>My Page</title>
</head>
<body>

     <div class="container-fluid main-container" id="main-container">


       <div class="midball"></div>
       <div class="foreball"></div>
       <div class="backball"></div>

       <span  class="my_story">My Story</span>

       

       <div  class="triangle_2"></div>
       <div  class="triangle_3"></div>

       <span  class="languages-header">Languages</span>







<div  class="square_1"></div>

<div  class="square_2"></div>





<span  class="contact">Contact</span>
<span  class="first_name">First Name</span>
<span  class="last_name">Last Name</span>
<span  class="phone_number">Phone Number</span>
<span  class="message">Message</span>
<span  class="email">Email</span>

<div class="contact-me-button-container">
<span  class="contact-me-button">Contact Me</span>
</div>


<div class="my-portrait-container">
<div  class="my-portrait-frame"></div>
<div class="my-image-container">
<div class="my-image">
<div  class="my-image-dark"></div>
</div>
</div>
</div>

<div class="front-end-container">
<span  class="front">Front</span>
<span  class="front-end">End</span>
</div>



<!-- <div  class="ellipse_20"></div>
<div  class="ellipse_21"></div> -->
</div>

<div class="contact-form-button-container">
<span  class="contact-form-button">Submit </span>
</div>

<div  class="first-name-container"></div>
<div  class="last-name-container"></div>
<div  class="phone-number-container"></div>
<div  class="email-container"></div>
<div  class="message-content-container"></div>

<div  class="blob_1"></div>
<div  class="blob_2"></div>
<div  class="blob_3"></div>

<div  class="triangle_1"></div>

<!-- Sidebar  -->
<div class="sidebar-container">
<div class="logo-container">
<div  class="logo-image-container"></div>
<div  class="logo-text-container"></div>
</div>

<div  class="ellipse_16" id="ellipse_16"></div>

<div class="sidebar-content-container">
<a href="#company-information">    <div  class="logo-image"></div> </a>
<a href="#company-information">    <span  class="webtek-link">WebTek</span></a>
</div>
<a href="#"><span  class="about-me-link">About Me</span></a>
<a href="#">  <span  class="projects-link">Projects</span></a>
<a href="#">  <span  class="languages-link">Languages</span></a>
<a href="#">  <span  class="contact-link">Contact</span></a>
</div>
</div>

<script src="dist/build.js" defer></script>

</body>
</html>

我的JavaScript文件有以下代码，可以运行，但我希望拖动它可以上下滚动，从左向右滚动

document.addEventListener('DOMContentLoaded', function() {
     const ele = document.getElementById('main-container');
     ele.style.cursor = 'grab';
 
     let pos = { top: 0, left: 0, x: 0, y: 0 };
 
     const mouseDownHandler = function(e) {
         ele.style.cursor = 'grabbing';
         ele.style.userSelect = 'none';
 
         pos = {
             left: ele.scrollLeft,
             top: ele.scrollTop,
             // Get the current mouse position
             x: e.clientX,
             y: e.clientY,
         };
 
         document.addEventListener('mousemove', mouseMoveHandler);
         document.addEventListener('mouseup', mouseUpHandler);
     };
 
     const mouseMoveHandler = function(e) {
         // How far the mouse has been moved
         const dx = e.clientX - pos.x;
         const dy = e.clientY - pos.y;
 
         // Scroll the element
         ele.scrollTop = pos.top - dy;
         ele.scrollLeft = pos.left - dx;
     };
 
     const mouseUpHandler = function() {
         ele.style.cursor = 'grab';
         ele.style.removeProperty('user-select');
 
         document.removeEventListener('mousemove', mouseMoveHandler);
         document.removeEventListener('mouseup', mouseUpHandler);
     };
 
     // Attach the handler
     ele.addEventListener('mousedown', mouseDownHandler);
 });

我遗漏了什么？

为了使垂直滚动正常工作，我需要将“高度”属性设置为小于页面上内容的使用量，感谢您抽出时间阅读我的文章和问题。非常感谢。

请从html中提供更多信息。如果我们可以重新创建代码，那么调试就容易多了。

document.addEventListener('DOMContentLoaded', function() {
     const ele = document.getElementById('main-container');
     ele.style.cursor = 'grab';
 
     let pos = { top: 0, left: 0, x: 0, y: 0 };
 
     const mouseDownHandler = function(e) {
         ele.style.cursor = 'grabbing';
         ele.style.userSelect = 'none';
 
         pos = {
             left: ele.scrollLeft,
             top: ele.scrollTop,
             // Get the current mouse position
             x: e.clientX,
             y: e.clientY,
         };
 
         document.addEventListener('mousemove', mouseMoveHandler);
         document.addEventListener('mouseup', mouseUpHandler);
     };
 
     const mouseMoveHandler = function(e) {
         // How far the mouse has been moved
         const dx = e.clientX - pos.x;
         const dy = e.clientY - pos.y;
 
         // Scroll the element
         ele.scrollTop = pos.top - dy;
         ele.scrollLeft = pos.left - dx;
     };
 
     const mouseUpHandler = function() {
         ele.style.cursor = 'grab';
         ele.style.removeProperty('user-select');
 
         document.removeEventListener('mousemove', mouseMoveHandler);
         document.removeEventListener('mouseup', mouseUpHandler);
     };
 
     // Attach the handler
     ele.addEventListener('mousedown', mouseDownHandler);
 });