Question

如何仅滚动线条而不滚动滚动窗格中的图像？我目前在html上做这个，有什么建议吗？我还没有学习jQuery，无论如何，这可以用html编码完成吗？

这些是我目前的编码：

＆＃13;

@charset "utf-8";
/* CSS Document */

/*  bhoechie tab */
div.bhoechie-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
  margin-top: 20px;
  margin-left: 50px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
  opacity: 0.97;
  filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
  background-color: #5A55A3;
  background-image: #5A55A3;
  color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #5A55A3;
}

div.bhoechie-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 10px;
}

div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="../Documents/Unnamed Site 2/Untitled-4.css" rel="stylesheet" type="text/css">
</head>

<div style="height:380px;width:380px;overflow:auto;">
<img src="scroll/src/denso.jpg" alt="Sample picture for scroll box">
<hr COLOR="BLACK" WIDTH="60%" >
<div class="vertical_line"></div>

</div>

<style>


.vertical_line{position: relative; top: 0; left:0;  right:0;}
.vertical_line{position: absolute; top:10px; left:190px; right: 190px; height:360px; width:3px;background:#000; }

</style>



<body>
</body>
</html>

＆＃13;

Answer 1

如果图像不依赖于线条，则不使用位置：绝对值，你可以改成

.image{    

Position:fixed;
}

以便它适合容器。

如何使滚动条仅滚动线条而不滚动图像

1 个答案: