灵活滚动

Question

如何在窗口最小化时向div添加滚动条，并在最大化时删除我尝试使用此脚本但不起作用

   <script type="text/javascript">
          $(document).ready(function () {
               var bodywidth = $(document).width();
               $("#tabMain").width(bodywidth);
           });
    </script>

这里是我的div：

   <div class="tabsMainCont" id="tabMain">
          <ul class="tabsMenu">
          <li><a href="#" id="Profile">Profile</a></li>
          <li><a href="#" id="Clinics">My Clinics</a></li>
          <li><a href="#" id="Assistants">My Assistants</a></li>
          <li><a href="#" id="Mangment">Mangment</a></li>
          </ul>
          <div class="tabsContent">
          <p>test</p>
          </div>
      </div>

这是我到目前为止的css：

.tabsMainCont 
{
    margin: 0 auto;
    padding-top: 19px;
    width: 1257px;
}

.tabsMenu
{
    float:left;
   overflow: hidden; margin: 0 0 0 0; background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
   border-bottom: 1px solid #D1D1D1;
   width:100%;
       -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height:43px;
}

.tabsMenu li
{
    float:left;
    list-style-type:none;
    border-right: 1px solid #DEDEDE;
    height:43px;
width:340px;
}

.tabsMenu li a
{
padding:11px 26px 26px 118px;  
display:block;
color:Black;
}


.tabsMenu li a:hover
{
    text-decoration:none;
    background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
color:Black;
}

.tabsMenu li a:focus
{
background: rgb(244,244,244); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.tabsMainCont .tabsContent
{
background-color:White;
border-radius:4px;
overflow:auto; 
float:left;
width:100%;   
}

tabsContent div是我想要滚动的那个

Answer 1

如果您希望在浏览器提供的内容之外使用水平和垂直滚动，则需要设置要滚动的元素的宽度和高度（在本例中为.tabsContent）是px或％。鉴于您已将.tabsMenu设置为隐藏溢出，因此如果您只是添加：

float: left;
overflow: auto;

到.tabsMainCont元素，只有在.tabsContent元素中有其他内容时才会水平滚动。

编辑：我预见到的唯一问题是垂直滚动条将位于.tabsMainCont的最右边，这会导致可用性问题，我强烈建议只使用溢出 - x在元素上并使用浏览器垂直滚动，因此更新的css将是：

.tabsMainCont 
{
    margin: 0 auto;
    padding-top: 19px;
    width: 1257px;
    float:left;
    overflow-x: auto;
}