1

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

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

4

4 回答 4

1

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

    #pageleft {overflow-x:hidden;overflow-y: auto;}
于 2012-08-21T03:08:24.973 回答
1

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

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

这将完全隐藏基于 webkit 的 Chrome/Safari/Anything 中的滚动条。

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

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

于 2012-08-21T14:14:31.427 回答
1

您可以将其包装在第二个 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/

参考了这个解决方案：删除 HTML 滚动条但允许鼠标滚轮滚动

于 2012-08-21T08:50:02.563 回答
0 
::-webkit-scrollbar{ 

    display: none;
}

::-moz-scrollbar{ 

    display: none;
}

::scrollbar{ 

    display: none;
}

这里是 webkit，moz 和 normal

于 2017-06-15T16:23:34.547 回答