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平滑滚动，只需在谷歌搜索。

向下滚动我的表

2 个答案: