Как добавить slimscroll

Question

Итак, я пытаюсь добавить 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

Попробуйте изменить overflow недвижимость для div с idlogs до 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;"> 

Для причудливых завитков, как стройнее те пытаются использовать различные плагины, доступные для свитков и проверка его реализации. На SO есть несколько вопросов для 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' 
      });