我的表的向下滚动选项

Question

我有显示给我的用户的options for table selections。当这些选择被单击为here时，我正在尝试为我的两个手机浏览器启用滚动选项(垂直轴或向下)。我尝试在不同的表中使用overflow-y:scroll选项，但仍然无法向下滚动。有什么建议吗？这是我的HTML for options和HTML for one of the tables I want to scroll for。我可以在我的PC浏览器中沿垂直和水平方向滚动表格。如果我启用了自动旋转选项，我可以在移动浏览器中滚动。

​

//All the following functions toggle between showing the negative,positive,neutral and ethics comments
function switchVisibleNegative() {
  if (document.getElementById('Negative')) {

    if (document.getElementById('Negative').style.display == 'none') // if item 1 is hidden
    {
      document.getElementById('Negative').style.display = 'block'; // item 1  is displayed.
      document.getElementById('Neutral').style.display = 'none';
      document.getElementById('Positive').style.display = 'none';
      console.log("In switchVisibleNegative");
    } else {
      document.getElementById('Negative').style.display = 'none';
      document.getElementById('Neutral').style.display = 'none';
      document.getElementById('Positive').style.display = 'none';
      console.log("In switchVisibleNegative else");
    }
  }
}

.district-health-store-table {
  Border: 1px solid #797979;
  Padding: 5px;
  width: 100%;
  Background-color: #000000;
}

.district-health-store-table td {
  Border: 1px solid #000000;
  Padding: 5px;
  border-bottom: 2px solid #fff;
}

.district-health-store-table.labelColumn {
  width: 66%;
}

.district-health-store-table.valueColumn {
  width: 34%;
  text-align: center;
}

<div id="item-6" class="col-sm-3" style="margin-left: -5px; margin-right: 30px; margin-bottom: 10px; display: none; height: 300px; overflow-y: scroll;">
  <!--overflow-y: scroll;-->
  <div style="color:#f70000;font-weight:bold;margin-bottom:5px;">Feedback Performance</div>
  <table class="table-responsive table-layout: fixed; district-health-store-table">
    <tbody>
      <tr id="1" class="show" onclick="switchVisibleNegative();" ng-repeat=" feed in performance.feedbackperform">
        <td style="background-color: #FF4C4C; color:black;">Negative</td>
        <td style="background-color: #FF4C4C; width: 100%; color:black;">{{feed.Negatives}}</td>
      </tr>
      <tr id="2" class="show" onclick="switchVisibleNeutral();" ng-repeat="feed in performance.feedbackperform">
        <td style="background-color: #ffff80; color: black;">Neutral</td>
        <td style="background-color: #ffff80; width: 100%; color: black;">{{feed.Neutrals}}</td>
      </tr>
      <tr id="3" class="show" onclick="switchVisiblePositive();" ng-repeat=" feed in performance.feedbackperform">
        <td style="background-color: #7FBF7F; color: black;">Positive</td>
        <td style="background-color: #7FBF7F; width: 100%; color: black;">{{feed.Positives}}</td>
      </tr>
      <tr id="4" class="show" onclick="switchVisibleEthics();" ng-repeat=" feed in performance.feedbackperform">
        <td style="background-color: #d9d9d9; color: black;">Ethics</td>
        <td style="background-color: #d9d9d9; width: 100%;  color: black;">{{feed.Ethics}}</td>
      </tr>
    </tbody>
  </table>

  <table id="Negative" style="display: none; background-color: #FF4C4C; color: black;" class="table table-responsive table-layout: fixed; district-health-store-table">
    <tbody>
      <tr>
        <!--filter:{'CommentType':'Neutral'}-->
        <th>Store</th>
        <th>Comment</th>
        <th>USB Notes</th>
        <th>Status</th>
        <th>Event Date</th>
        <th>CommentType</th>
      </tr>

      <tr ng-repeat="comment in performance.comments | filter: performance.commenttype | filter:{'CommentType':'Negative'}">
        <td>{{comment.Store}}</td>
        <td ng-if="performance.commenttype !== 'Ethics'">{{comment.Comment}}</td>
        <td ng-if="performance.commenttype === 'Ethics'">...Confidential...</td>
        <td ng-if="performance.commenttype !== 'Ethics'">{{comment.USB_Notes}}</td>
        <td ng-if="performance.commenttype === 'Ethics'">...Confidential...</td>
        <td>{{comment.Status}}</td>
        <td>{{comment.EventDate | date}}</td>
        <td>{{comment.CommentType | date}}</td>
      </tr>
    </tbody>
  </table>

​

Answer 1

我没有改变这一行上的任何东西。

​

<div id="item-6" class="col-sm-3" style="margin-left: -5px; margin-right: 30px; margin-bottom: 10px; overflow-y: scroll; overflow-x: scroll; display: none; height: 300px; ">
  <!--overflow-y: scroll;-->

​

我在下面的表格中添加了overflow-y: scroll和overflow-x: scroll；，我可以在PC和移动浏览器上滚动。

​

<table id="Negative" style="margin-left: 0px; margin-right: 30px; background-color: #FF4C4C; color: black; margin-bottom: 10px; overflow-y: scroll; overflow-x: scroll; display: none; height: 300px;" class="table table-responsive table-layout: fixed; district-health-store-table">

​

Answer 2

在用户将单击的位置，您应该使用<a href="#id">click here</a>

然后在同一文档中使用html标记中的id滚动到哪里，例如

<div id="id">user will be scrolled here </div>

然后你可以使用JavaScript进行平滑滚动，只需在谷歌中搜索即可。