当前位置: 首页 > 编程笔记 >

如何将水平滚动条放置在DIV的中心?

阳建弼
2023-03-14
本文向大家介绍如何将水平滚动条放置在DIV的中心?,包括了如何将水平滚动条放置在DIV的中心?的使用技巧和注意事项,需要的朋友参考一下

要将水平滚动条放置在div的中心,请使用向左滚动键。您可以尝试运行以下代码以将水平滚动条放置在div中。

示例

滚动条位于div的中心:

<html>
   <head>
   
      <title>jQuery Scroll</title>
      <script src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function(){
             
          $(document).ready(function(){
            var outerContent = $('.demo');
            var innerContent = $('.demo > div');
           
            outerContent.scrollLeft( (innerContent.width() - outerContent.width()) / 2);
   
            });
               
         });
      </script>
       
      <style>
        html, body, div {
            margin:0;
            padding:0;
        }
        .demo {
            width:400px;
            overflow-x:scroll;
        }
       
        #viewContainer {
            height:120px;
            width:1000px;
            display:table;
        }
        .myclass {
            width:250px;
            height:100%;
            display:table-cell;
            border:2px solid blue;
        }
         </style>
    </head>    
<body>
     
<div class="demo">
  <div id="viewContainer">
    <div class="myclass" id="farLeft">Far left</div>
    <div class="myclass" id="left">left</div>
    <div class="myclass" id="center">center</div>
    <div class="myclass" id="right">right</div>
    <div class="myclass" id="farRight">Far right</div>
  </div>
</div>    

</body>
</html>
 类似资料:
  • 问题内容: 是否可以为div上的垂直滚动条指定位置(左侧或右侧)? 其中说明了如何使用溢出属性。有什么方法可以将滚动条放在可滚动区域的左侧? 问题答案: 要么 适用于所有主要浏览器(甚至是Safari)的剪切和粘贴解决方案 任何高度或宽度都可以 (可选)添加到每个项目中,以更改文本回流的方向,同时保留容器的方向。

  • 问题内容: 我们可以将图片设置为like的背景图片: 我需要在水平和垂直中心放置一张桌子。是否有使用的跨浏览器解决方案? 问题答案: 居中是CSS中最大的问题之一。但是,存在一些技巧: 要水平放置表格,您可以将左右边距设置为自动: 要垂直居中,唯一的方法是使用javascript: 否是可能的,因为表是一个块而不是一个内联元素。 编辑

  • 问题内容: 我有一个div容器,其定义如下: 填充此div包含的表格后,这将自动为我提供水平和垂直滚动条。我只希望只自动显示水平滚动条。我将以编程方式修改桌子的高度。 我该怎么做呢? 问题答案: 除非使内容足够大以至于不能使用它们,否则不应同时获得水平和垂直滚动条。 但是,由于错误,您通常在IE中进行操作。签入其他浏览器(Firefox等)以查明是否实际上只有IE在执行此操作。 IE6-7(在其他

  • 问题内容: 我有一个部门想要显示图像,然后单击以在灯箱中打开它们。我将它们向左浮动并在线显示它们。设置overflow- x进行滚动,但是一旦行空间不足,它仍然会将图像放在下面。我想让它们内联,并在需要时显示水平滚动。 注意: 我无法更改内部图像的结构。它必须是锚点内的img。我的灯箱就这样要求它。 HTML: CSS: 我知道这是非常基本的,但是我做不到。不知道怎么了 问题答案: HTML中可能

  • 我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢?我看到了一个解决方案使用边距自动和最大宽度,但div将被削减,所以我没有这样做。 null null

  • 问题内容: 有什么方法可以在必要时启用水平滚动条吗? 情况是这样的:我有一个单元格,其中存储了很长的数据。因此,我需要水平滚动条。 有人对此有想法吗? 问题答案: 首先,在里面添加a 并为滚动条的存在设置策略: 然后,通过设置模式,指示JTable不能自动调整列的大小: