html - 如果元素超过其父元素的大小，如何使用 CSS 显示指示？

Question

假设我有一个 div .parent，其中包含另一个 div .child。我可以吗？如果可以，我该如何在 .child 超出 .parent 的宽度时使用 CSS 显示指示(即图标)？

我已经使用 jQuery 实现了我的目标(参见下面的示例)，但我正在寻找一个仅使用 CSS 的解决方案，因为我正试图尽可能低地使用 jQuery。

注意:.child div 具有动态宽度。

另一个注意事项:我不想编辑 div 的内容

var x = $('.child').offset().left + $('.child').width();

var y = $('.parent').offset().left + $('.parent').width();

if (x > y) {

  var z = x - y;

  $('.child')
    .append($('<div></div>')
      .css('left', z - 10)
      .css('position', 'absolute')
      .css('top', $('.child').height() / 2 - 10)
      .text('>'));

}

.parent {
  position: relative;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.child {
  position: absolute;
  top: 40px;
  border: 1px solid red;
  height: 100px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    Some text
  </div>
</div>

Answer 1

我阅读了您的问题和评论。我有个主意。是的，我认为解决您的问题的最佳方法是使用 javascript。

但我决定寻找替代品:)

这就是为什么我在这个解决方案上花费了 10 分钟的时间。

是的，它只适用于 webkit 浏览器。但这是可能的。

.parent {
  position: relative;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow:auto;
}

.child {
  position: absolute;
  top: 40px;
  border: 1px solid red;
  height: 100px;
  width: 400px;
}

.parent1 {
  position: relative;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow:auto;
}

.child1 {
  position: absolute;
  top: 40px;
  border: 1px solid red;
  height: 400px;
  width: 100px;
}

::-webkit-scrollbar {
      background: transparent;
}


::-webkit-scrollbar-button:horizontal:end  {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
    border-left:8px solid red; 
}

::-webkit-scrollbar-button:vertical:end  {
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top:8px solid blue; 
}

<div class="parent">
  <div class="child">
    Some text
  </div>
</div>

<div class="parent1">
  <div class="child1">
    Some text
  </div>
</div>