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

スクロールバーのサイズによって狭い2番目の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 に答える
1

Webkitブラウザーの場合、次のことができます。

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

これにより、Chrome / Safari/Webkitに基づくその他のスクロールバーが完全に非表示になります。

もちろん、これは持ち運び可能な答えではありませんが、試してみて一致させる効果があります。

もちろん、もう1つ行うことは、スクロールホイールのマウスイベントをトラップし、javascriptを使用して自分でdivを移動することです。

于 2012-08-21T14:14:31.427 に答える
0 
::-webkit-scrollbar{ 

    display: none;
}

::-moz-scrollbar{ 

    display: none;
}

::scrollbar{ 

    display: none;
}

ここでwebkit、moz、通常

于 2017-06-15T16:23:34.547 に答える