- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家好!
我想知道如何启用自动滚动?目前,当您在我的网站上输入许多命令时,您必须手动向下滚动鼠标才能看到响应。您也不能使用箭头键,因为它们当前用于遍历命令历史记录。我正在通过使用 jquery 自动向下滚动来进行研究,但它们都不起作用!
该网站背后的想法是,它的功能应该像终端一样,当您输入输入并接收输出时,窗口应该像普通终端一样自动向下滚动。
目前我已经尝试将焦点集中到 div 类上,但这并不成功。我也尝试过使用这个
我也尝试过使用这段代码:
$('terminal').animate({
scrollTop: $('terminal').get(0).scrollHeight
}, 1500);
但是我认为它不起作用,因为开始时没有滚动条,并且它只在开始时滚动一次,并且在提示内容时不会连续滚动。
这是我的 website其代码可以在 github 存储库 here 中找到。
感谢您的宝贵时间!
我的index.html文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<title>BitVivAZ Terminal</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script src="scripts/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
</head>
<body>
<div class="container">
<div class="window">
<div class="handle">
<div class="buttons">
<button class="close">
</button>
<button class="minimize">
</button>
<button class="maximize">
</button>
</div>
<span class="title"></span>
</div>
<div class="terminal"></div>
</div>
</div>
</body>
</html>
我的index.js文件:
var username = prompt("Please enter your name:", "name");
if (username === null ){
username = "user";
}
$(document).ready(function() {
// COMMANDS
function ls(){
for (var i = 0; i < files.length; i++) {
terminal.append(files[i].name + "\t\t");
}
terminal.append(lineBreak);
}
function nano(args) {
var str = args;
var fileFound = false;
for (var i = 0; i < files.length; i++) {
if (str.toString() === files[i].name){
fileFound = true;
terminal.append(files[i].content + lineBreak);
}
}
if (!fileFound) {
terminal.append("cannot access \'" + str + "\' : No such file or directory" + lineBreak);
}
}
function clear() {
terminal.text("");
}
function echo(args) {
var str = args.join(" ");
terminal.append(str + "\n");
}
function date(){
// Get the date for our fake last-login
var date = new Date().toString(); date = date.substr(0, date.indexOf("GMT") - 1);
terminal.append("Today is " + date + lineBreak);
}
function help(args){
var str = args;
if (str.toString() === "") {
terminal.append("Supported commands are:" + lineBreak);
terminal.append("\t - ls: list directory contents" + lineBreak);
terminal.append("\t - nano: open and print files. e.g. nano [FILENAME]" + lineBreak);
terminal.append("\t - clear: clear the terminal screen" + lineBreak);
terminal.append("Bonus Commands are:" + lineBreak);
terminal.append("\t - echo: prints input as text in the terminal. e.g. echo [INPUT]" + lineBreak);
terminal.append("\t - date: return today's date and current time." + lineBreak);
} else {
for (var i = 0; i < commands.length; i++){
if (str.toString() === commands[i].name){
terminal.append(commands[i].help + lineBreak);
}
}
}
}
// END COMMANDS
var title = $(".title");
var terminal = $(".terminal");
var prompt = username + "@vivaz";
var path = ": ~";
var lineBreak = "<br>";
var commandHistory = [];
var historyIndex = 0;
var command = "";
var commands = [{
"name": "clear",
"function": clear
}, {
"name": "help",
"function": help
}, {
"name": "echo",
"function": echo
}, {
"name": "date",
"function": date
}, {
"name": "ls",
"function": ls
}, {
"name": "nano",
"function": nano
}];
var files = [{
"name": "README.md",
"content": lineBreak + "Name: Martin" + lineBreak + "Surname: Buxmann" + lineBreak + "Date of Birth: 23/02/1996" + lineBreak + "Place of Birth: Pretoria, South Africa" + lineBreak + lineBreak + "Created to learn and to create anything from gfx to programming" + lineBreak
}, {
"name": "github.txt",
"content": "<a href=\"https://github.com/bitVivAZ\">GitHub Website</a>"
}, {
"name": "projects.txt",
"content":
lineBreak +
"<div class=\"project_title\">Severe Gaming Website</div>" +
lineBreak +
"I have huge passion for eSports especially for DOTA 2 and thought it would be a great way " +
"to learn Django and Python by creating a website for Severe Gaming, a multi gaming organization that I manage!" + lineBreak +
lineBreak +
"Made using: Django, Python, CSS, HTML, jQuery" +
lineBreak +
"Github repo : <a href=\"https://github.com/bitVivAZ/SeveregamingZA\" target=\"_blank\">https://github.com/bitVivAZ/SeveregamingZA</a>" +
lineBreak +
"Domain : <a href=\"https://www.severegaming.co.za\" target=\"_blank\">https://www.severegaming.co.za</a>" +
lineBreak
}];
function processCommand() {
var isValid = false;
// Create args list by splitting the command
// by space characters and then shift off the
// actual command.
var args = command.split(" ");
var cmd = args[0];
//console.log(cmd);
args.shift();
// Iterate through the available commands to find a match.
// Then call that command and pass in any arguments.
for (var i = 0; i < commands.length; i++) {
if (cmd === commands[i].name) {
commands[i].function(args);
isValid = true;
break;
}
}
// No match was found...
if (!isValid) {
terminal.append(command + ": command not found" + lineBreak);
}
// Add to command history and clean up.
commandHistory.push(command);
historyIndex = commandHistory.length;
command = "";
}
function displayPrompt() {
terminal.append("<span class=\"prompt\">" + prompt + "</span>");
terminal.append("<span class=\"path\">" + path + "</span> ");}
// Delete n number of characters from the end of our output
function erase(n) {
command = command.slice(0, -n);
terminal.html(terminal.html().slice(0, -n));
}
function clearCommand() {
if (command.length > 0) {
erase(command.length);
}
}
function appendCommand(str) {
terminal.append(str);
command += str;
}
/*
// Keypress doesn't catch special keys,
// so we catch the backspace here and
// prevent it from navigating to the previous
// page. We also handle arrow keys for command history.
*/
$(document).keydown(function(e) {
e = e || window.event;
var keyCode = typeof e.which === "number" ? e.which : e.keyCode;
// BACKSPACE
if (keyCode === 8 && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") {
e.preventDefault();
if (command !== "") {
erase(1);
}
}
// UP or DOWN
if (keyCode === 38 || keyCode === 40) {
// Move up or down the history
if (keyCode === 38) {
// UP
historyIndex--;
if (historyIndex < 0) {
historyIndex++;
}
} else if (keyCode === 40) {
// DOWN
historyIndex++;
if (historyIndex > commandHistory.length - 1) {
historyIndex--;
}
}
// Get command
var cmd = commandHistory[historyIndex];
if (cmd !== undefined) {
clearCommand();
appendCommand(cmd);
}
}
});
$(document).keypress(function(e) {
// Make sure we get the right event
e = e || window.event;
var keyCode = typeof e.which === "number" ? e.which : e.keyCode;
// Which key was pressed?
switch (keyCode) {
// ENTER
case 13:
{
terminal.append("\n");
processCommand();
displayPrompt();
break;
}
default:
{
appendCommand(String.fromCharCode(keyCode));
}
}
});
$(terminal).trigger("focus");
// Set the window title
title.text(username + "@VivAZ:~");
// Display Welcome Message
terminal.append("Welcome " + username + ", to the bitVivAZ Terminal!" + lineBreak);
terminal.append("Some supported commands are:" + lineBreak);
terminal.append("\t - ls: list directory contents" + lineBreak);
terminal.append("\t - nano: open and print files. e.g. nano [FILENAME]" + lineBreak);
terminal.append("\t - clear: clear the terminal screen" + lineBreak);
terminal.append("\t - help: lists all supported commands." + lineBreak);
displayPrompt();
});
$('terminal').animate({
scrollTop: $('terminal').get(0).scrollHeight
}, 1500);
最佳答案
只需定义滚动函数即可测量 div 高度并滚动到底部,即:
function scrollToBottom() {
$('.terminal').scrollTop($('.terminal')[0].scrollHeight);
}
并在displayPrompt()中执行它。
关于javascript - 输入输入时自动滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54582583/
我想做的是,如果鼠标位于“下一个”按钮上,它会以慢速向右滚动,如果鼠标没有位于“下一个”按钮上,它会停止滚动? 这是我的尝试http://jsfiddle.net/mdanz/nCCRy/14/ $(
StyleCop 是一个很棒的视觉工作室小插件。但它不会向您显示实时提示或提供任何自动修复。 随之而来的是 reSharper 和 StyleCop for reSharper,这是理想的解决方案,但
我为我的MatchQuery使用了模糊性选项,但是我想将模糊性值设置为auto。有什么办法吗? 另外,对于完成建议程序,您可以将其设置为支持unicode,对于我的MatchQuery,有什么方法可以
我想从表中获取一行[字符串名称,字符串密码,int 某些内容]并将其映射到一个 User 对象,该对象具有 3 个属性,如上面的 getter 和 setter有什么方法可以自动完成吗?我考虑过反射,
我有一个像这样的方法:void m1(string str) 并且有一个像这样的类: public class MyClass { public bool b1 { set; get; }
我正在尝试使用 $rootScope 从一个 Controller 向另一个 Controller $broadcast 一些数据。 如果我使用像 ng-click 这样的触发器来运行将广播的功能,它
我考虑了很多关于是要使用完全自动化的缓存还是手动缓存。 我们的自动方法是一种解决方案,它可以挖掘数据库、查询和格式化每个潜在和 future 的数据请求,并将其保存到适当的缓存存储(内存缓存或基于磁盘
我的 CSS 必须使用过渡来更改,直到现在我都使用 div:hover 来实现。 当您单击另一个 div 时需要激活过渡,而不是当您将鼠标悬停在必须移动/更改的 div 上时。 我该怎么做? 谢谢 永
在我的应用程序中,我需要一些动画,但如果它已经设置了动画,则不需要持续时间。但我的问题是它会自动添加持续时间。 在这里你可以看到 2 个函数,第二个没有持续时间但它确实有持续时间(可能从 1 秒开始)
两年前,我需要制作一个工具,通过 POST 自动将 txt/csv 文件上传到我的 Web 服务器,然后使用 cronjob 通过 PHP 对其进行解析。 这有两次在每天午夜自动发生。尽管这行得通,但
请阅读下面程序中的评论: #include void test(char c[]) { c=c+2; //why does this work ? c--; printf("%
也许是个幼稚的问题,但是...... 确认或拒绝: 自动和静态存储持续时间的对象/变量的内存的存在是在编译时确定的,程序运行时失败的可能性绝对为零,因为没有足够的内存用于自动对象。 自然地,当自动对象
有没有什么方法可以自动获得类中属性更改的通知,而不必在每个 setter 中都编写 OnPropertyChanged? (我有数百个属性,我想知道它们是否已更改)。 安东建议 dynamic pro
我们在使用 Azure DevOps 的项目中采用了 gitflow 流程。我有以下场景: 当功能分支合并到 Develop 时,我想在完成拉取请求的同时执行压缩合并策略 当 Release 分支定期
我的网站上有一个评论部分,我将 html 编码的评论保存在我的数据库中。所以我添加了这条评论- "testing" `quotes` \and backslashes\ and html 并将其保存在
是否存在“ checkin 前 TFS 自动 checkout ”这样的功能,以便在我说“ checkin ”之前我不会 checkout 任何文件,例如以防我只是临时更改文件 - 这一直发生。 换句
我有一个运行在 Linux/Apache/Tomcat 堆栈上的网站,它需要每隔几个月自动脱机以进行服务器维护,这将持续任意时间。有哪些选项可以让 Apache 建立和取消“服务器维护”页面? 我需要
我经常在工作中创建文档,在公司内部,由于我们使用的首字母缩写词和缩写词的数量,我们几乎拥有自己的语言。因此,我厌倦了在发布文档之前手动创建首字母缩写词和缩写表,并且快速的谷歌搜索发现了一个可以有效地为
我希望在用户或宏将计算模式从自动更改为手动或手动更改为自动时运行代码。是否有为此触发的事件? (属性是 Application.Calculation 在 Excel 互操作中。) 使用 Excel
这个问题在这里已经有了答案: Repeat command automatically in Linux (13 个回答) 6年前关闭。 我想创建一个脚本来获取另一个文件夹中的所有文件夹名称。并为这些
我是一名优秀的程序员,十分优秀!