使用CSS阻止頁面滾動

我正在使用Bootstrap構建應用程序。使用CSS阻止頁面滾動

面板自動增長，因此用戶必須向下滾動瀏覽器窗口，我不希望發生這種情況。

這裏是如何看的那一刻：

我想聊天面板是瀏覽器的完整高度，讓輸入框和發送按鈕在瀏覽器的底部，我希望用戶列表只能增長到當前的瀏覽器窗口大小，然後在其內部進行滾動。

是否有可能使用CSS？

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <strong>Room:</strong> <span id="channel"></span> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-10"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Chat</h3> 
     </div> 
     <div class="panel-body"> 
      <ul id="messages"></ul> 
      <form id="chat"> 
      <div class="input-group"> 
       <input type="text" class="form-control" id="chat-input" /> 
       <span class="input-group-btn"> 
       <button type="button" class="btn btn-primary">Send</button> 
       </span> 
      </div> 
      </form> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Users</h3> 
     </div> 
     <div class="panel-body"> 
      <div class="list-group" id="users"></div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

來源

2015-10-20 Jack

'bottom：0'？ ... – YOU

'overflow-y'？顯示代碼？ – hjpotter92

@Jack，它適合你嗎？ –

是的，這是可能的。你可能會強制聊天和用戶div有自己的卷軸。

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.chat { 
 
    position: relative; 
 
    float: left; 
 
    width: 70%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background: #ccc; 
 
} 
 
.users { 
 
    position: relative; 
 
    float: right; 
 
    width: 30%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background: #f00; 
 
} 
 
.tempHeight { 
 
    width: 100px; 
 
    height: 2000px; 
 
}

<div class="chat"> 
 
    <div class="tempHeight">Chat</div> 
 
</div> 
 
<div class="users"> 
 
    <div class="tempHeight">User list</div> 
 
</div>

來源

2015-10-20 12:40:45 IonDen

不知道更多你的標記，當我想要的東西是充滿高度我只能發佈一些幫助

，我設置頁面知道這個第一

html,body { 
    height:100%; 
}

然後元素（如果他們是身體的直接子女）可以使用這個

.chat { 
    height:100%; /* You may have to use some more appropriate working out here with the help of calc() maybe */ 
    overflow: auto /* this will allow the scroll to happen in element not in window */ 
}

這將是使用類似於此

<html> 

<body> 
    <div class="chat"> 
    This is the chat 
    </div> 
</body> 
</html>

來源

2015-10-20 12:40:58 jthawme

對不起，我忘記了密碼！ – Jack

不適合我嗎？ – Jack

單擊按鈕標記，你產生的東西。你也可以鍵入併發送一些東西。聊天窗口有它自己的滾動條。使用全屏預覽。也因爲我使用了scrollTop()，它總是滾動到最後一條消息。

片段

$(function() { 
 
    var sendChat = function() { 
 
    $(".input-area .chat-area ul").append(($(".message-box").html().length) ? '<li style="display: none;" class="just-inserted">' + $(".message-box").html() + '</li>' : '<li style="display: none;" class="just-inserted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto optio culpa eum, hic recusandae temporibus earum consequatur laudantium esse itaque unde, vero! Sunt delectus debitis, alias reiciendis necessitatibus consectetur voluptatem.</li>'); 
 
    $(".message-box").html(""); 
 
    $(".input-area .chat-area ul li.just-inserted").slideDown(function() { 
 
     $(".input-area .chat-area").scrollTop($(".input-area .chat-area ul").height()); 
 
     $(this).addClass("next-insert"); 
 
     setTimeout(function() { 
 
     $(".next-insert").removeClass("next-insert just-inserted"); 
 
     }, 500); 
 
    }); 
 
    }; 
 
    $(".input-area button").click(sendChat); 
 
    $(".message-box").keydown(function (e) { 
 
    if (e.keyCode == 13) 
 
     sendChat(); 
 
    }); 
 
});

* {box-sizing: border-box; margin: 0; padding: 0; list-style: none; font-family: Segoe UI;} 
 
.input-area {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; padding: 15px 350px 15px 15px;} 
 
.input-area .message-box {border: 1px solid #999; margin: 10px 0; padding: 5px;} 
 
.input-area button {padding: 3px 15px; cursor: pointer;} 
 

 
.input-area .chat-area {position: absolute; right: 0; top: 0; bottom: 10px; width: 325px; border: 1px solid #999; margin: 10px 10px 0; padding: 10px; overflow: auto;} 
 

 
.input-area .chat-area ul li {margin: 5px; padding: 5px; border: 1px solid #999; transition: background-color 0.5s ease;} 
 

 
.just-inserted {background: #ccc;} 
 
.next-inserted {background: #999; color: #fff;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<div class="input-area"> 
 
    <p>Enter Message Here</p> 
 
    <div contenteditable class="message-box"></div> 
 
    <button>Send</button> 
 
    <div class="chat-area"> 
 
    <ul> 
 
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto optio culpa eum, hic recusandae temporibus earum consequatur laudantium esse itaque unde, vero! Sunt delectus debitis, alias reiciendis necessitatibus consectetur voluptatem.</li> 
 
    </ul> 
 
    </div> 
 
</div>

您也可以淡出已經得到了張貼的方式，新的消息。嘗試以上。

來源

2015-10-20 12:51:14

此代碼與我的代碼沒有任何關係？ – Jack

@Jack你什麼時候釣魚*添加你的代碼？我給了答案後？ –

當人問以上？ – Jack

使用CSS阻止頁面滾動

回答

相關問題