如何添加slimscroll

Question

所以我试着为我的实时chatbox添加slimscroll到我的表格中，但是我什么都不做。我提供给你的资源不包括我添加它的任何尝试，因为我只是指出我的失败是没有意义的。

Chatbox.php

   <?php include_once("@header/header.php"); ?>
<div class="wraper container-fluid">
<div class="page-title"> </div>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Shoutbox <small>Support is not provided here; open a ticket. <strong>NO ADVERTISING, NO SPAMMING</strong></small></h2>
                <?php
                    $viewUsers = $odb->prepare("SELECT `rank` FROM `users` WHERE `username` = :username");
                    $viewUsers->execute(array(':username' => $_SESSION['username']));
                    $rank = $viewUsers->fetch(PDO::FETCH_ASSOC);
                    if($rank['rank'] == 1) {
                    ?>
                <div class="panel-actions">
                    <button type="button" id="clear" onclick="clearchat()" class="btn btn-danger btn-sm">Clear</button>
                </div>
                <?php
                    }
                    ?>
            </div>
            <div id="logs" style="overflow: hidden; width: auto; height: 450px;">
                <table id="chatlogs" class="table table-hover">
                    <tr>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer">
                <div class="input-group">
                    <input type="text" id="message" class="form-control" placeholder="Message here..">
                    <span class="input-group-btn"><button type="button" id="send" onclick="send()" class="btn btn-primary">Send</button></span>
                    <input type="hidden" id="username" value="<?php echo $_SESSION['username']; ?>">
                </div>
            </div>
        </div>
    </div>
</div>
<?php include_once("@header/footer.php"); ?>
<script>
    function clearchat() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById("message").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("POST", "@ajax/clearchat.php", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send();
    }
</script>
<script>
    function send() {
      var message=$('#message').val();
      var username=$('#username').val();

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById("message").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("POST", "@ajax/sendmessage.php", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send("message=" + message + "&username=" + username);

      $('#message').val('');
    }
</script>
<script language="JavaScript"> 
    $('#chatlogs').load("@ajax/shoutbox.php").fadeIn("slow");
       setInterval("updateContent();", 1000 ); 
       function updateContent() 
        { 
             $('#chatlogs').load("@ajax/shoutbox.php").fadeIn("slow"); 
        } 
</script>
<script>
    $(document).ready(function(){
        $('#message').keypress(function(e){
          if(e.keyCode==13)
          $('#send').click();
        });
    });
</script>

Answer 1

我做了这个CSS，它和我一起工作……您可以根据需要更改宽度。

::-webkit-scrollbar
{
    width: 3px;   /*for vertical scrollbars*/ 
    height: 12px;  /*for horizontal scrollbars*/ 
}

::-webkit-scrollbar-track
{
    background: rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: #818B99;
    border: 3px solid transparent;
    border-radius: 9px;
    -moz-background-clip: content-box;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

Answer 2

尝试将具有id logs的div的overflow属性更改为scroll

<div id="logs" style="overflow: scroll; width: auto; height: 450px;">

如果你只需要垂直滚动，而不需要水平滚动。

<div id="logs" style="overflow-x: hidden; overflow-y: scroll; width: auto; height: 450px;">

对于更花哨的卷轴，比如更瘦的卷轴，可以尝试使用不同的可用于卷轴的插件，并检查它的实现。slimscrolls上有多个问题，答案可能有不同的选项。而且它们也更容易使用。

Answer 3

这有点老了，但从问题看，似乎你想使用slimscroll，但在代码中没有引用。

要使用jquery slimscroll，首先需要添加一个引用，如下所示：

<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

(或者你的插件放在哪里)。

然后，您可以将slimscroll添加到您的表中，如下所示：

 // Add slimscroll to table
          $('#chatlogs').slimscroll({
              height : '400px'
          });