隐藏SyntaxHighlighter滚动条

最新版SyntaxHighlighter默认Y轴是有滚动条的,但其实高度是自适应,所以Y轴不需要滚动条,而X轴由于要显示正确的行数,所以滚动条我们还是保留,如果不想X轴有滚动条,在编辑代码的时候就要注意每行的代码量。

隐藏Y轴滚动条需要修改 /Syntaxhighlighter/styles/shCoreDefault.css 此样式表,定位到第55行


1

2

3

4

5

6

7

.syntaxhighlighter {

width100% !important;

margin1em 0 1em 0 !important;

positionrelative !important;

overflowauto !important;

font-size1em !important;

}

将其中 overflow: auto !important; 修改为 overflow-y: hidden; 就ok了。

本文来自:http://itdos.com/JavaScript/20150303/0213262.html 转载请保留此文字,谢谢!

时间: 2024-10-12 09:28:36

隐藏SyntaxHighlighter滚动条的相关文章

SyntaxHighlighter滚动条和右上角图标显示问题解决

我选择了SyntaxHighlighter for wordpress作为显示代码插件.安装完成后,发现有两个问题.第一个是在代码区右上角有一个绿色的问号区域,点击会链接到Syntax的版权信息.我尊重原作者做出的努力,可是当代码段较少而又出现多次连续代码区域时,一片绿色的问号在视觉效果上感觉较差.我要去掉这个问号.在控制板中编辑该插件配置文件syntax_highlighter.php,将以下代码中的toolbar改为false即可.前端资源分享 .代码   var $default_atts

css实现无(隐藏)滚动条页面

实现功能:隐藏浏览器滚动条,且不影响鼠标滚轮滚动页面适用:以大图片为背景或产品介绍页面(如果和视差滚动一起使用应该会效果更佳)所需技术:非常简单的css和js 首先来看下对比效果(图1 => 图2,两者都能通过鼠标滚轮进行内容的滚动) (图1) (图2) 可以明显的看到:图2的正文宽度明显比图1的宽度小,并发生了向右的偏移.这就是无滚动条页面的基本原理:移动(设置)正文的偏移量(margin/padding),使正文的滚动条出现在父节点可是范围的外面,以达到无滚动条的效果 代码实现HTML节点可

关于隐藏原生滚动条的一些事

在页面中让一部分可以滚动很容易 给父元素设置overflow:auto;就行了 这样做虽然简单但是也有很大的问题:原生的滚动条实在是太丑了!! 怎么把原生的滚动条隐藏起来,传统的做法是在: 要设置的overflow:auto,的元素外面在包一层div 在这个div上设置overflow:hide,通过调整该它的宽度,来隐藏掉滚动条: 这样的做法虽然能实现但是还是过于麻烦 C3出来后就直接提供修改滚动条样式的方法 ::-webkit-scrollbar { width: 0px; } 目前仍然存在

Ubuntu 15.10内建隐藏式滚动条

Ubuntu 15.10(威利狼人)操作系统一大特点是采用来自于上游GNOME的滚动条,这将让很多用户感到高兴.Ubuntu开发者Canonical是做事我行我素的公司,不会过于依赖上游项目,就是为什么我们今天还在使用Unity 7的原因,但是,这并不意味着Canonical完全不依靠GNOME,事实上,Ubuntu开发者仍然大量依靠GNOME.在Ubuntu 15.10(威利狼人)操作系统当中,Canonical就从善如流,放弃了Ubuntu之前版本当中始终显示的滚动条,而是采用来自于GNOM

Element UI 中被隐藏的滚动条

Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中. 使用的时候,放在 <el-scrollbar></el-scrollbar> 标签内即可如: <div style="height:100%"> <el-scrollbar class="m-scroll" style="height:100%">

css - (左右滑动 时,隐藏底部滚动条)

先上效果图,如下: 是不是经常看到此类效果? 这里如果不借用其它框架,单纯的利用css 来实现怎么做呢? 1.这一看就要用到overflow,但是用它会有一个默认的滚动条: 2.那么重点来了,怎么解决这个问题呢? 3.用 ::-webkit-scrollbar 就可以很好地解决. 代码如下: css * { padding: 0; margin: 0; } .nav { position: fixed; top: 0; background: white; width: 100%; height

FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)

即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字体模式(一般适用于移动端显示,iOS,Android): 大间距模式(FineUIMvc v1.3.0新增显示模式): 可见,大间距模式和大字体模式类似,但是文字大小还是默认的 13px,而不是大字体模式的 16px. 这个新增的模式对那些显示内容不多的客户非常受用,当然也适合于密集恐惧症患者~_~

css隐藏滚动条方法

1.完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条:<boby scroll="no"> 2.在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条:反之,则显示:<boby scroll="auto"> 3.样式表方法 在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条:加入style="ov

在 IE 浏览器中,使用 bootstrap 使得页面滚动条浮动显示,自动隐藏,自动消失

貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 IE 应该是传统的滚动条样式:而在应用版的 IE 中,滚动条默认才是浮动显示,自动隐藏. 但是可能会发现,一些使用了 bootstrap 样式的网站,也会出现相同这种情况,谷歌了一下,发现这是因为 bootstrap 设置了一个 CSS 的属性: @-ms-viewport { width: dev