如何在左侧定位div滚动条

是否可以指定一个位置(左侧或右侧)在 div 上放置垂直滚动条?

是否可以指定一个位置(左侧或右侧)在 div 上放置垂直滚动条?

例如,看看this page ,它解释了如何使用 overflow 属性。有没有办法将滚动条放在可滚动区域的左侧?

100

您可以在 css 中尝试direction:rtl;。然后在内部div中重置文本方向

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}
#scroll div{
    direction:ltr;
}

未经测试。

86
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }
  .item_direction {
    direction:ltr;
  }
<div cl="list_container">
  <div cl="item_direction">1</div>
  <div cl="item_direction">2</div>
  <div cl="item_direction">3</div>
  <div cl="item_direction">4</div>
  <div cl="item_direction">5</div>
  <div cl="item_direction">6</div>
  <div cl="item_direction">7</div>
  <div cl="item_direction">8</div>
  <div cl="item_direction">9</div>
  <div cl="item_direction">10</div>
  <div cl="item_direction">11</div>
  <div cl="item_direction">12</div>
</div>

工作示例:JSFiddle

适用于所有主流浏览器的剪切和粘贴解决方案(甚至 Safari)

任何高度或宽度都可以工作

<style>
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }
  .item_direction {
    direction:ltr;
  }
</style>
<div cl="list_container">
  <div cl="item_direction">1</div>
  <div cl="item_direction">2</div>
  <div cl="item_direction">3</div>
  <div cl="item_direction">4</div>
  <div cl="item_direction">5</div>
  <div cl="item_direction">6</div>
  <div cl="item_direction">7</div>
  <div cl="item_direction">8</div>
  <div cl="item_direction">9</div>
  <div cl="item_direction">10</div>
  <div cl="item_direction">11</div>
  <div cl="item_direction">12</div>
</div>

(可选)将cl="item_direction添加到每个项目以更改文本回流的方向,同时保留容器方向。

40

有点老问题,但我想我应该抛出一个方法,当这个问题被问到时,这个方法并不广泛。

您可以在现代浏览器中使用transform: scaleX(-1)在父<div>上反转滚动条的一侧,然后应用相同的转换来反转子“sleeve”元素。

HTML格式

<div cl="parent">
  <div cl="sleeve">
    <!-- content -->
  </div>
</div>

CSS公司

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}
.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

注意:您可能需要使用-ms-transform-webkit-transform前缀作为 IE 9 的旧浏览器。选中CanIUse并单击“显示全部”以查看较旧的浏览器要求。

32

我有同样的问题。但是当我在选项卡和手风琴组合中添加direction: rtl;时,它会使我的结构崩溃。

要做到这一点的方法是添加 divdirection: rtl;作为父元素,并为子 div 集direction: ltr;

我用这个第一个https://api.jquery.com/wrap/

$( ".your selector of child element" ).wrap( "<div cl='scroll'></div>" );

然后只需使用 css:)

在儿童 div 添加到 css

 .your_cl {
            direction: ltr;    
        }

并通过 jQuery 与类.scroll 添加父 div

.scroll {
            unicode-bidi:bidi-override;
            direction: rtl;
            overflow: scroll;
            overflow-x: hidden!important;
        }

为我工作的知府

http://jsfiddle.net/jw3jsz08/1/

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(469)
如何使用AVCaptureDeviceFormat从iPhone录制超时视频
上一篇
使用CSS我可以检查浏览器是否支持“CSS属性和值API”(Houdini )@ property规则
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(33条)