使用overflow-x：可见仍然显示滚动条[重复]答案

【问题标题】：Using overflow-x : visible still shows scrollbar [duplicate]使用overflow-x：可见仍然显示滚动条[重复]
【发布时间】：2015-09-08 13:42:28
【问题描述】：

我目前正在使用 jQuery-UI 的可拖动交互，我正在尝试将列表项从侧边栏拖到主面板，但是，拖动的项目被剪裁并且侧边栏呈现水平滚动条，尽管有溢出-x :可见集。如何防止侧边栏创建滚动条和可拖动元素不被剪裁？

拖动前：

拖后：

代码：

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  overflow-x: visible;
  background-color: #f5f5f5;
  white-space: nowrap;
  border-right: 1px solid #eee;
  padding-left: 30px;
  padding-right: 30px;
}


/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}

<div class="common">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="draggable">
              <a href="#" class="list-group-item">
                <span class="badge">dasdsa</span>
                <span class="badge">dsad</span>
                <h4>
                 dsad
                 <br /><small>dsadsa</small>
                 <br /><small>dsadsa</small>
                </h4>
              </a>
            </li>
          </ul>
        </div>

        
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          MAIN PANEL
        </div>
      </div>
    </div>
    </div>

【问题讨论】：

由于您使用的是引导程序，因此通用模板本身可能会导致许多奇怪的行为，但是考虑到您也将 z-index 放在那里，这应该可以工作，但我想知道它是否与固定定位有关。
我认为你的问题不在.sidebar，我认为是在父母身上。请分享更多代码。
好吧，我让它动起来了，我似乎无法让它粘住jsfiddle.net/RachGal/wsvyrxt8
好吧，侧边栏应该像浮动一样保持在原位，如果我在可拖动对象中添加 position:inherit 就可以了，但是它们会缩小。
请您接受我的回答

标签： jquery html css twitter-bootstrap jquery-ui

【解决方案1】：

这个 sn-p 似乎不起作用所以这里是一个小提琴 http://jsfiddle.net/RachGal/51w1c357/ 而不是添加 position:inherit 我添加了 refreshpositions:true （以及其余的！！！）

$(".draggable").draggable();
var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     appendTo: '#drophere',
     refreshPositions: true,
     containment: 'DOM',
     zIndex: 1500,
     addClasses: false
};

$('.group').draggable(draggableArguments);
$('.group').droppable();

$(".nav-sidebar").droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(".nav-sidebar").append($(ui.draggable));
    }
});

$('#drophere').droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $('#drophere').append($(ui.draggable));
    }
});

.draggable {
    border: solid 2px gray;
}
.sidebar {
    position:fixed;
    width:200px;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-y: auto;
    /* Scrollable contents if viewport is shorter than content. */
    overflow-x: visible;
    background-color: #f5f5f5;
    white-space: nowrap;
    border-right: 1px solid #eee;
    padding-left: 30px;
    padding-right: 30px;
}
/* Sidebar navigation */
  .nav-sidebar {
    margin-right: -21px;
    /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.group{width:150px;
    height:auto;}


#drophere{width:700px;left:200px; height:100vh;}

<link src="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="common">
    <div class="container-fluid">
        <div class="row">
                <ul class="col-sm-3 col-md-2 sidebar nav nav-sidebar" > <li class="group" class="draggable" ><a href="#" class="list-group-item">
                <span class="badge">dasdsa</span>
                <span class="badge">dsad</span>
                <h4>
                 dsad
                 <br /><small>dsadsa</small>
                 <br /><small>dsadsa</small>
                </h4>
              </a>
                    </li>
                </ul>
             <div id="drophere" class="col-sm-9 col-md-9">MAIN PANEL</div>
        </div>
    </div>
   
</div>

【讨论】：