html中如何设置滚动条的位置向左偏

有点编程常识的人都知道，htm的滚动条（浏览器滚动条）竖向靠右，横向从左向右。但是横向的几乎都是隐藏的，用不到，竖向滚动都是需要的。
那，如何设置滚动条自由位置呢，请看详细。

操作方法

  • 01

    1、新建div标签 新建一个html文件，命名为（滚动条向左偏移.html），使用记事本打开html文件，新建一个div。 如图：

  • 02

    2、设置div样式 在文件中写入div的样式，高度一定要比浏览器窗口高，才会显示出滚动条来。 写入以下样式： <style type="text/css"> .div1{ border:1px solid #FF0000; width:600px; height:800px; margin:0 auto; text-align:center; } </style> 如图：

  • 03

    3、显示div竖向滚动条 在样式表中写入以下代码： overflow-y:scroll; //显示竖向滚动条，并填充div内容。 如图：

  • 04

    4、设置滚动条颜色属性 在样式中写入以下代码： scrollbar-3d-light-color:#FFFF00; scrollbar-arrow-color:#FF0000; scrollbar-base-color:#f2c3d4; scrollbar-dark-shadow-color:blue; scrollbar-face-color:yellow; scrollbar-highlight-color:#4c28df; scrollbar-shadow-color:blue; 如图：

  • 05

    5、调整宽度 写入以下CSS样式： ::-webkit-scrollbar{width:15px;} ::-webkit-scrollbar-track{background-color:#bee1eb;} ::-webkit-scrollbar-thumb{background-color:#00aff0;} ::-webkit-scrollbar-thumb:hover {background-color:#9c3} ::-webkit-scrollbar-thumb:active {background-color:#00aff0} 如图：

  • 06

    6、调整位置 写入以下代码： <script> document.getElementById('div1').scrollTop=100;//通过scrollTop设置滚动到100位置 </script> 如图：

赞 (0)

相关推荐

  • 在Word 2010文档中精确设置图片的位置

    尽管Word 2010提供了多种内置的图片位置供用户选择,但在实际排版工作当中,用户往往希望能更精确地设置图片在Word文档页面中的位置,操作步骤如下所述: 步骤/方法 01 打开Word 2010文 ...

  • 如何在Word2010中设置SmartArt图形位置

    如果使用预设位置选项设置SmartArt图形位置，可以选中SmartArt图形，然后在“SmartArt工具/格式”功能区中单击“排列”分组中的“位置”按钮。在打开的位置列表中选择合适的预设位置选项（ ...

  • 在windows8中怎么设置语言栏的位置

    适用范围: Windows 8 消费者预览版 知识点分析: Windows 8 系统默认没有启用语言栏，需要先手动开启。 操作步骤: 1、将鼠标光标移动到屏幕右下，在弹出的菜单上点击“设置”，参见下图 ...

  • 在Word2007中设置SmartArt图形位置

    作为一个独立的图形对象，用户可以根据需要设置SmartArt图形在Word2007文档中的位置。用户可以使用Word2007提供的预设位置选项设置SmartArt图形位置，还可以在“布局”对话框中精确 ...

  • 在Word2010中设置SmartArt图形位置

    作为一个独立的图形对象，用户可以根据需要设置SmartArt图形在Word2010文档中的位置。用户可以使用Word2010提供的预设位置选项设置SmartArt图形位置，还可以在“布局”对话框中精确 ...

  • 在Word2007文档中设置剪贴画位置

    在Word2007文档中设置剪贴画位置

    Word2007内置多种剪贴画位置供用户选择,用户可以通过选择这些内置的剪贴画位置来确定剪贴画在Word2007文档中的位置.一旦确定这些位置,则无论文字和段落位置如何改变,剪贴画的位置都不会发生变化 ...

  • excel图表中如何设置数据标志的显示位置

    如何在excel图表中设置数据标志的显示位置 方法/步骤 为方便演示 制作如下excel表格 并生成内嵌柱状图 双击柱内如 弹出数据系列格式 数据标签设置为值 设置完后 值将显示在图标上 如下图所示 ...

  • Excel2016中怎么设置文件的保存位置和备份位置?

    Excel 2016中,我们有时候需要确定保存文件的和回复文件的位置,这个可以根据自己的条件设定哦.今天小编就跟大家说一下,如何设置这个文件位置. 1.首先,我们打开Excel 2016的文件. 2. ...

  • word文档中怎么设置页眉页脚的格式、位置?

    本文主要介绍word文档中页眉页脚的格式.位置等的设置方式.例如:奇偶页不同,首页不同等,有需要的朋友可以参考本文! 步骤 创建一个空白word文本,选择菜单栏中“插入”标签,看到页眉.页脚.页码按钮 ...