首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >文档化自述文件页面不滚动

文档化自述文件页面不滚动
EN

Stack Overflow用户
提问于 2020-09-01 03:14:33
回答 2查看 582关注 0票数 0

我正在使用Docsify显示一些markdown页面,但是我遇到了一个问题:我的README.md中的主页面index.html不能滚动浏览所有的文本。

以下是我的index.html页面:

代码语言:javascript
复制
<!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页面:

代码语言:javascript
复制
# My Personal Documentation

Some documentation

angularStuff: 

asanaStuff: 

assemblyStuff: 

&nbsp;  
&nbsp;  

bashStuff: 

batchStuff: 

bootstrapStuff: 

my repo
- **this is my docs repo for these docs**
&nbsp;  
&nbsp;  

cards: 
- **repository to keep track of**
&nbsp;  
&nbsp;  

cSharpStuff:
&nbsp;  
&nbsp;  

excelStuff: 

javaStuff:

javaScriptStuff: 

&nbsp;  
&nbsp;  

luaStuff: 

&nbsp;  
&nbsp;  

miscStuff: 
- **miscellaneous stuff I couldn't think of where to put**
&nbsp;  
&nbsp;  

mySQLStuff: 

&nbsp;  
&nbsp;  

oracleStuff: 

&nbsp;  
&nbsp;  

phpStuff: 

prs: 
- **repository to keep track of PRs I reviewed from Lendio**
&nbsp;  
&nbsp;  

pythonStuff: 

&nbsp;  
&nbsp;  

rubyStuff: yStuff

&nbsp;  
&nbsp;  

sqlServerStuff: ServerStuff

&nbsp;  
&nbsp;  

typeScriptStuff: eScriptStuff

&nbsp;  
&nbsp;  

vueStuff: 

&nbsp;  
&nbsp;  

writing: 

这是它如何向我显示的屏幕截图:

请注意,在我的屏幕截图中,最后显示的是javaScriptStuff:,但是如果你查看我的README.md,在这之后有很多东西我应该能够滚动到,但是我不能。

它在这个屏幕截图中是看不见的,但是在右边没有滚动条可以让我向下滚动查看剩下的内容。

一如既往,一个正确的、解释清楚的答案将被标记为被接受的答案并获得支持。

提前谢谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-09-02 00:23:44

在我发布了这个问题后,我问了几个同事,并被引导到了我的问题的答案。我需要在index.html的css块中为overflow指定一个值。

我所要做的就是添加这个:

代码语言:javascript
复制
.content {
  overflow: auto;
}

到我的以<style type="text/css">开头的块,现在垂直滚动条可见。

票数 0
EN

Stack Overflow用户

发布于 2021-09-04 01:42:35

我尝试了另一种解决方案,它几乎可以工作,但多级菜单上的锚点停止工作。

我可以用这个来解决这个问题:

代码语言:javascript
复制
body:not(.ready) {
  overflow: auto;
}

当我使用Presite保存纯HTML站点时,页面停止滚动。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63676806

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档