主页 / 问题 / 988863
Accepted
kizoso
Asked:2020-06-03 23:09:11 +0000 UTC2020-06-03 23:09:11 +0000 UTC

如何在宽度有限的 div 中将默认范围设置为右侧？

  • 772

如果 div 的宽度有限，并且可以在内部滚动，那么默认情况下它将使范围位于内容的左侧。就像在此样品中。如何在右侧制作范围？这样同时滚动仍然存在，如果可能的话，不使用 js。

div{
  height:200px;
  width:200px;
  position:relative;
  overflow:auto;
  border:2px solid black;
}
img{
  height:170px;
}
<div>
  <img src="https://arte1.ru/images/detailed/4/2219.jpg"/>
</div>

html

1 个回答

  1. Best Answer

    可能的解决方案：

    将 div 翻转过来，transform: scaleX(-1);但里面的图片与它一起镜像。因此，我们额外为里面的图片增加了一个“镜像”。

    div{
  height:200px;
  width:200px;
  position:relative;
  overflow:auto;
  border:2px solid black;
  transform: scaleX(-1);
}
img{
  height:170px;
  transform: scaleX(-1)
}
    <div>
  <img src="https://arte1.ru/images/detailed/4/2219.jpg"/>
</div>

    Ps 哎呀，如果您使用键盘上的箭头而不是鼠标滚动，则会发现侧柱 *

    可以肯定的是，对于 JS，它会是这样的（如果有很多这样的元素）：

    (function(){

var scroll = document.querySelectorAll('.js-scroll');
var i;
for(i = 0; i < scroll.length; i++){
  scroll[i].scrollTo(100500, 0);
}

})();
    div{
  height:200px;
  width:200px;
  position:relative;
  overflow:auto;
  border:2px solid black;
}
img{
  height:170px;
}
    <div class="js-scroll">
  <img src="https://arte1.ru/images/detailed/4/2219.jpg"/>
</div>

    • 4

相关问题