javascript - 如何修复不需要的侧滚动条？

标签 javascript html css

<分区>

所以我回到了我的网站，但是这次出现了一个新问题...... 现在我正在处理我的网站，因为我有我的布局只是为了意识到有一个不必要的侧滚动条。我真的不知道是什么原因造成的，这很令人沮丧。

我试着原路返回，但找不到。

注意...任何显示 bar 的东西都只是一个进度条。 https://glitch.com/~triangular-trouser 

var move1 = function() {}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.m-scene {

.scene_element {
    animation-duration: .5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  .scene_element--fadein {
    animation-name: fadeIn;
  }

  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }
  
  &.is-exiting {
      .scene_element {
        animation-direction: alternate-reverse;
      }
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Times New Roman", Times, serif;
  padding: 0px;
  background: #ffffff;
}

.header {
  padding: 20px;
  text-align: left;
  color: #565656;
}

.header h1 {
  font-size: 50px;
  text-align: right;
  color: #565656
}

.header p {
  color: #565656
}

.fullcolumn {   
  float: left;
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  background-color: #d7cec7;
}

.leftcolumn {
  float: left;
  width: 25%;
  font-family: "Times New Roman", Times, serif;
  margin-left: 10px;
  background-color: #d7cec7;
}

.rightcolumn {
  float: right;
  width: 75%;
  font-family: "Times New Roman", Times, serif;
  margin-left: -10px;
  background-color: #d7cec7;
}

.fakeimg {
  background-color: #aaa;
  width: 50%;
  height: px;
  padding: 20px;
  border-radius: 5px;
}

.card {
  padding: 20px;
  margin-top: 0px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.picalignment {
  float: left;
  width: 50%;
  padding: 5px;
}

.next::after {
  content: "";
  clear: both;
  display: table;
}

.imgfix {
  overflow: auto;
}

.imgfix::after {
  content: "";
  clear: both;
  display: table;
}

.mybiopic {
  float:left;
  margin: 10px;
}
#main {
  transition: margin-left .5s;
}

.body {
  transition: background-color .5s;
}

#myDiv {
  transition: background-color .5s;
}

#myDiv4 {
  transition: background-color .5s;
}
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#myProgress1 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar1 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress2 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar2 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress3 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar3 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress4 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar4 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress5 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar5 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress6 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar6 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

#myProgress7 {
  width: 100%;
  background-color: #ffffff;
  
}

#myBar7 {
  width: 10%;
  height: 30px;
  background-color: #C09F80;
  text-align: center;
  line-height: 30px;
  color: white;
}

.filler {
  background-color: #d7cec7;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Thimble Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
</html>

<html>
  <div id="myDiv" class="m-scene">
    <div id="main" class="m-aside scene_element scene_element--fadein">
      <body onload="move1()" id="myDiv">
        <script src="script.js"></script>
        <div class="header" id="myDiv2">
          <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
          <h1>Digital Portfolio</h1>
          <p style="text-align: right;">Taewoo Hong</p>
        </div>
        <div class="filler row m-right-panel m-page scene_element scene_element--fadeinright" id="filler">
          <div class="leftcolumn">
            <div class="card" id="myDiv4">
              <h1 style="color: #76323F;">
                <b>Skills</b>
              </h1>
              <h2 style="color: #ffffff;">
                Adaptability
              </h2>
              <div id="myProgress1">
              <div id="myBar1">10%</div>
              </div>
              <h2 style="color: #ffffff;">
                Leadership
              </h2>
              <div id="myProgress2">
              <div id="myBar2">10%</div>
            </div>
              <h2 style="color: #ffffff;">
                Coding
              </h2>
              <div id="myProgress3">
              <div id="myBar3">10%</div>
            </div>
              <h2 style="color: #ffffff;">
                Art
              </h2>
              <div id="myProgress4">
              <div id="myBar4">10%</div>
            </div>
              <h1 style="color: #76323F;">
                <b>Languages</b>
              </h1>
              <h2 style="color: #ffffff;">
                English
              </h2>
              <div id="myProgress5">
              <div id="myBar5">10%</div>
              </div>
              <h2 style="color: #ffffff;">
                Korean
              </h2>
              <div id="myProgress6">
              <div id="myBar6">10%</div>
              </div>
              <h2 style="color: #ffffff;">
                German(basic)
              </h2>
              <div id="myProgress7">
              <div id="myBar7">10%</div>
              </div>
            </div>
          </div>
          <div class="rightcolumn">
            <div class="card" id="myDiv5">
              <h1 style="color: #76323F; text-align:right;">
                <b>Contact Information</b>
              </h1>
            </div>
          </div>
        </div>
        <div class="footer m-right-panel m-page scene_element scene_element--fadeinright" id="foot">
          <h2>Footer</h2>
        </div>

        <div id="mySidenav" class="sidenav">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
          <a href="index.html">Home</a>
          <a href="index-2.html">Test</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>

      </body>
    </div>
  </div>
</html>

最佳答案

此 div 的两边都有一个额外的负边距:

<div class="row m-page scene_element scene_element--fadeinup">

从 row 类中删除上述两个 margin 似乎可以解决问题:

.row {
  margin-left: 0; 
  margin-right:0;
}

你可以像 Bootstrap 4 那样创建一个类:

.mx-0 {
  margin-left: 0; 
  margin-right:0;
}

关于javascript - 如何修复不需要的侧滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55963434/

上一篇：javascript - 使用 React 和 react-slick，我只是很难理解如何使用它

下一篇：php - 如何更改 select2 上元素的文本颜色

相关文章：

JavaScript 对象字面量语法错误

javascript - 如何在 Angular 工厂内定义ngModel？

javascript - 将事件从 HTML 元素冒泡到 iframe

.net - System.Web.UI.WebControls.TableCell 的替代品

javascript - 响应式 D3 条形图在调整大小时附加新的 <text>

javascript - 如何以正常的 SlideUp 行为关闭 Accordion ？

javascript - 无法在另一个 js 文件中加载自定义 Mongoose 架构

html - 电子邮件中的图片占位符

php - 我在使用 jquery 将图像上传到数据库时在 php 中遇到错误，变量中的数据可能没有传递

javascript - 在 Chrome 中分析 Javascript 时，我怎么知道我已经处理了内存泄漏？

©2024 IT工具网  联系我们