Question

好的，所以我希望左侧div具有可扫描的内容，我尝试溢出：隐藏和自动但他们并没有完全做到这一点。还有一个滚动条显示。

这是带有HTML和CSS的JSFiddle：http://jsfiddle.net/yukimura/Sgq4j/

Answer 1

你的意思是只有垂直滚动内容，同时避免使用水平滚动条吗？

    #pageleft {overflow-x:hidden;overflow-y: auto;}

Answer 2

你可以将它包装在第二个div中，该div通过滚动条大小变窄，并将div的溢出设置为隐藏。

<强> HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<div id="wrapper">
<div id="scrollWrap">            
     <div id="pageleft">
          <div id="leftheader"></div>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>

     </div>
    </div>
</div>


</body>
</html>

<强> CSS

#wrapper { width:980px;margin:0px auto; }
#scrollWrap { width:220px; height:500px; overflow:hidden; }
#pageleft { float:left;margin:10px 10px;width:228px;height:500px;border:1px solid #313131;overflow:scroll; }

#pageleft > #leftheader { width:228px;height:48px;background-image:url(http://i48.tinypic.com/2ecnjx2.png);border-bottom:1px solid #313131;display:block;position:absolute; }

#pageleft a { width:220px;height:66px;display:block;border-bottom:1px solid #313131;transition: all 400ms linear; }

#pageleft a:hover { background-color:#5ca0d1; }

http://jsfiddle.net/Sgq4j/3/

参考此解决方案：Remove HTML scrollbars but allow mousewheel scrolling

Answer 3

对于webkit浏览器，您可以执行以下操作：

::-webkit-scrollbar {
    display:none;
}

这将完全隐藏Chrome / Safari /其他任何基于webkit的滚动条。

我当然意识到这不是一个可移植的答案，但它会给你一个尝试和匹配的效果。

另一件事当然是捕获滚轮的鼠标事件并使用javascript自行移动div。

Answer 4

::-webkit-scrollbar{ 

    display: none;
}

::-moz-scrollbar{ 

    display: none;
}

::scrollbar{ 

    display: none;
}

这里是webkit，moz和普通

删除滚动条但仍有可控内容

4 个答案: