Question

我有一些带有一些列表的侧边栏。每个列表前面都有一个标题栏div。侧边栏具有固定宽度overflow-x: auto。列表内容可能会溢出，使父侧边栏显示滚动条。

问题是当滚动条出现时标题栏div不会展开。我想要么，滚动时不要移动它或扩展'div'以适应滚动条生成的额外空间：JS Bin

是否可以使用CSS解决此问题？

Answer 1

可能是CSS的可能，但在我看来，你需要使用一些JavaScript来解决这个问题：

这是诀窍：

<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<!-- Imports for this component -->
<link rel="import" href="../../bower_components/px-view-header/px-view-header.html">

<!-- Imports for this component -->
<link rel="import" href="../../bower_components/px-card/px-card.html">


<!-- Imports for this component -->
<link rel="import" href="../../bower_components/google-map/google-map.html">

<link rel="import" href="../../bower_components/google-map/google-map-marker.html">
<link rel="import" href="../../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../../bower_components/google-map/google-map-directions.html">



<dom-module id="optimAviation-view">

  <template>


    <script>
      var gMap = document.querySelector('google-map');
      // gMap.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
    </script>
    <!-- https://io2014codelabs.appspot.com/static/codelabs/polymer-build-maps/#2 -->
    <style>
      #inputs {
        position: absolute;
        bottom: 25px;
        left: 25px;
        z-index: 100;
      }

      core-field {
        background: #fff;
        border-radius: 3px;
        margin-top: 5px;
        width: 200px;
      }

      core-field core-icon {
        vertical-align: middle;
      }

      google-map {
        display: block;
        height: 600px;
      }
    </style>

    <google-map latitude="37.779" longitude="-122.3892" min-zoom="3" max-zoom="11" language="en" api-key="API_KEY">
      <google-map-marker latitude="37.779" longitude="-122.3892" label="GG" title="Go Giants!" draggable="true" drag-events>

      </google-map-marker>
      <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1">
        <google-map-point latitude="37.779" longitude="-122.3892"></google-map-point>
        <google-map-point latitude="37.804" longitude="-122.2711"></google-map-point>
        <google-map-point latitude="37.386" longitude="-122.0837"></google-map-point>
      </google-map-poly>
    </google-map>
    <google-map-directions map="{{map}}" start-address="{{start}}" end-address="{{end}}" language="en" api-key="API_KEY"></google-map-directions>
  </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: "optimAviation-view",
    ready: function () {
      var self = this;
      this.apiKey = "API_KEY";
    }
  });
</script>

我们将在var sidebar = $('.sidebar'); sidebar.scroll(function(e) { sidebar.find('.title').css({ marginLeft: sidebar.scrollLeft() }); });元素上添加一些margin-left，等于水平滚动的像素数。这将始终显示标题栏粘贴在可滚动元素的右侧。

＆＃13;

.title

＆＃13;

$(function() {
  var sidebar = $('.sidebar');
  
  sidebar.scroll(function(e) {
    sidebar.find('.title').css({
      marginLeft: sidebar.scrollLeft()
    });
  });
});

＆＃13;

.sidebar {
  overflow-x: auto;
  width: 160px;
  height: 195px;
  background-color: lightgrey;
  padding-top: 20px;
}

.title {
  width: 100%;  
  text-align: right;
  background-color: grey;
}

.list {
  margin-top: 20px;
  white-space: nowrap;
}

＆＃13;

Answer 2

请仅使用CSS找到下面的解决方案。

.sidebar {
  overflow-x: auto;
  width: 160px;
  height: 200px;
  background-color: lightgrey;
  padding-top: 20px;
  overflow-x: scroll;
}

.title {
  width: 160px;
  text-align: right;
  position: fixed;
  background-color: grey;
}

.list {
  margin-top: 30px;
  white-space: nowrap;
  float: left;
}

.clear {
  clear: both;
}

<title>
  JS Bin
</title>

<body>
  <div class="sidebar">
    <div class="title">
      Title
    </div>
    <ul class="list">
      <li>
        This is a very long long line
      </li>
    </ul>
    <div class="clear">
      <div class="title">
        Title2
      </div>
      <ul class="list">
        <li>
          This is a very long long line
        </li>
      </ul>
      <div class="clear">
      </div>
</body>

在水平滚动父级时展开内部div宽度

2 个答案: