Docsify README 页面不滚动
Docsify README page not scrolling
我正在使用 Docsify 来显示一些降价页面,但我 运行 遇到了一个问题:主页 index.html
没有滚动浏览我 README.md
.
这是我的 index.html
页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="My Documentation Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
<script type="text/javascript">
document.querySelector('link[title=theme]').href="//unpkg.com/docsify/lib/themes/dark.css";
</script>
<style type="text/css">
.sidebar li {
margin: 0;
line-height: 1.7em;
}
.sidebar ul li ul {
padding-bottom: 10px;
}
.sidebar-nav>ul>li>p {
font-size: 17px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="app">Loading....</div>
<script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
<script>
window.$docsify = {
name: 'My Docs',
repo: '',
auto2top: true,
executeScript: true,
loadSidebar: true,
maxLevel: 4,
subMaxLevel: 1,
search: {
paths: 'auto',
},
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
<script src="//unpkg.com/docsify-copy-code"></script>
<script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-sql.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
</body>
</html>
这是我的 README.md
页面:
# My Personal Documentation
Some documentation
angularStuff:
asanaStuff:
assemblyStuff:
bashStuff:
batchStuff:
bootstrapStuff:
my repo
- **this is my docs repo for these docs**
cards:
- **repository to keep track of**
cSharpStuff:
excelStuff:
javaStuff:
javaScriptStuff:
luaStuff:
miscStuff:
- **miscellaneous stuff I couldn't think of where to put**
mySQLStuff:
oracleStuff:
phpStuff:
prs:
- **repository to keep track of PRs I reviewed from **
pythonStuff:
rubyStuff: yStuff
sqlServerStuff: ServerStuff
typeScriptStuff: eScriptStuff
vueStuff:
writing:
这是它为我显示的屏幕截图:
请注意我的屏幕截图显示的最后一个内容是 javaScriptStuff:
但如果您查看我的 README.md
之后有很多东西我应该可以滚动到但我不能' t.
在这个屏幕截图中并没有真正看到它,但是右侧没有滚动条可以让我向下滚动以查看其余内容。
一如既往,正确、解释清楚的答案将被标记为已接受的答案并点赞。
提前致谢。
我在发布这个问题后问了几个 co-workers,并被引导到我的问题的答案。我需要在 index.html
.
的 css 块中为 overflow
指定一个值
我所要做的就是添加这个:
.content {
overflow: auto;
}
到我以 <style type="text/css">
开头的块,现在垂直滚动条可见。
我尝试了另一个解决方案,它几乎可以工作,但多级菜单上的锚点停止工作。
我可以用这个解决它:
body:not(.ready) {
overflow: auto;
}
当我使用 Presite 保存 HTML-only 站点时,页面停止滚动。
我正在使用 Docsify 来显示一些降价页面,但我 运行 遇到了一个问题:主页 index.html
没有滚动浏览我 README.md
.
这是我的 index.html
页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="My Documentation Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
<script type="text/javascript">
document.querySelector('link[title=theme]').href="//unpkg.com/docsify/lib/themes/dark.css";
</script>
<style type="text/css">
.sidebar li {
margin: 0;
line-height: 1.7em;
}
.sidebar ul li ul {
padding-bottom: 10px;
}
.sidebar-nav>ul>li>p {
font-size: 17px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="app">Loading....</div>
<script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
<script>
window.$docsify = {
name: 'My Docs',
repo: '',
auto2top: true,
executeScript: true,
loadSidebar: true,
maxLevel: 4,
subMaxLevel: 1,
search: {
paths: 'auto',
},
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
<script src="//unpkg.com/docsify-copy-code"></script>
<script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-sql.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
</body>
</html>
这是我的 README.md
页面:
# My Personal Documentation
Some documentation
angularStuff:
asanaStuff:
assemblyStuff:
bashStuff:
batchStuff:
bootstrapStuff:
my repo
- **this is my docs repo for these docs**
cards:
- **repository to keep track of**
cSharpStuff:
excelStuff:
javaStuff:
javaScriptStuff:
luaStuff:
miscStuff:
- **miscellaneous stuff I couldn't think of where to put**
mySQLStuff:
oracleStuff:
phpStuff:
prs:
- **repository to keep track of PRs I reviewed from **
pythonStuff:
rubyStuff: yStuff
sqlServerStuff: ServerStuff
typeScriptStuff: eScriptStuff
vueStuff:
writing:
这是它为我显示的屏幕截图:
请注意我的屏幕截图显示的最后一个内容是 javaScriptStuff:
但如果您查看我的 README.md
之后有很多东西我应该可以滚动到但我不能' t.
在这个屏幕截图中并没有真正看到它,但是右侧没有滚动条可以让我向下滚动以查看其余内容。
一如既往,正确、解释清楚的答案将被标记为已接受的答案并点赞。
提前致谢。
我在发布这个问题后问了几个 co-workers,并被引导到我的问题的答案。我需要在 index.html
.
overflow
指定一个值
我所要做的就是添加这个:
.content {
overflow: auto;
}
到我以 <style type="text/css">
开头的块,现在垂直滚动条可见。
我尝试了另一个解决方案,它几乎可以工作,但多级菜单上的锚点停止工作。
我可以用这个解决它:
body:not(.ready) {
overflow: auto;
}
当我使用 Presite 保存 HTML-only 站点时,页面停止滚动。