为什么滚动功能不起作用？

Question

我对编码还很陌生，所以我没有足够的经验来准确地看出问题是什么。

第 1 部分（共 3 部分）：

首先，请允许我与您分享滚动功能是如何工作的。这是滚动功能的 CSS、JavaScript 和 HTML：

document.addEventListener("DOMContentLoaded", function() {
  const scrollElement = document.querySelector('.LoopingScrollv3');
  let originalContent = scrollElement.innerHTML;
  let contentToAdd = originalContent;

  scrollElement.addEventListener('scroll', function() {
    let atRightEnd = (scrollElement.scrollWidth - scrollElement.scrollLeft - scrollElement.clientWidth) < 50;

    if (atRightEnd) {
      scrollElement.innerHTML += contentToAdd;
    }
  });
});

.parent {
  background: mediumpurple;
  padding: 1rem;
}

.child {
  border: 1px solid indigo;
  padding: 1rem;
}

.inline-block-child {
  display: inline-block;
}

.FR {
  float: right;
}

.LoopingScrollv3 {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 250px;
}

#GeneralTextBox01 {
  background: #DDD;
  display: inline-block;
  height: 100px;
  padding: 15px;
  vertical-align: bottom;
  width: 100px;
}

<!doctype html>
<html lang="en">
 <head>
  <title>??????? </title>
  <link rel="stylesheet"
   href="style.css">
 </head>
 <body>

<div class='parent'>
  <div class='child inline-block-child'><h1>Welcome! </h1></div> 
  <div class="child inline-block-child FR" align="center"><h2>Testing A</h2>
  <table class="table"> 
    <thead>
      <tr class="active">
        <th class="LoopingScrollv3"> Image01 Image02 Image03 Image04 Image05 Image06 Image07 Image08 Image09 Image10 Image11 Image12 Image13 Image14 Image15 Image16 Image17 Image18 Image19 Image20 Image21</th> 
      </tr> 
    </thead> 
</table>
</div>
</div>


  <script src="script.js">
  </script>
 </body>
</html>

第 2 部分（共 3 部分）：现在这是插入正确位置时的滚动功能（“在 Test06.01 的条目内”）：

<!DOCTYPE html>
<html lang="en">
<head>

  <title>WHY IS THIS NOT WORKING!?</title>
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">     
</head>
  <body>     

<div class="container"> 
  <div class="row">
    <div class="col-sm-3"><center>Testing 01</center></div> 
    <div class="col-sm-6"><center>Testing 02</center></div>
    <div class="col-sm-3"><center>Testing 03</center></div>
  </div>

  <div class="row">
    <div class="col-sm-3"><center>Testing 04</center></div>
    <div class="col-sm-2 GeneralTextBox01"><center>Testing05</center></div>
    <div class="col-sm-4"><center>Testing06</center>
            <div class="child inline-block-child FR" align="center"> <h2>Testing06.01</h2>
              <table class="table"> 
                <thead>
                  <tr class="active">
                    <th class="LoopingScrollv3"> Image01 Image02 Image03 Image04 Image05 Image06 Image07 Image08 Image09 Image10 Image11 Image12 Image13 Image14 Image15 Image16 Image17 Image18 Image19 Image20 Image21</th>  <!-- Why is this not implementing the scroll? -->
                  </tr> 
                </thead> 
            </table>
            </div>
    </div>
    <div class="col-sm-3"><center>Testing 07</center></div>
  </div>

  <div class="row">
    <div class="col-sm-3"><center>Testing 08</center></div> 
    <div class="col-sm-6"><center>Testing 09</center></div>
    <div class="col-sm-3"><center>Testing 10</center></div>
  </div>

  <script src="script.js">
  </script>
 </body>

</html>

第 3 部分（共 3 部分）：我不确定我做错了什么。有谁知道为什么滚动功能出现在第 3 部分中的第 1 部分中，为什么它没有出现在第 3 部分中的第 2 部分中？它的显示方式如下：

Answer 1

寻找答案！寻找答案！寻找答案！寻找答案！寻找答案！寻找答案！寻找答案！

为什么滚动功能不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么滚动功能不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1