精华内容
下载资源
问答
  • 在html中下面内容会单独滚动1111111111111111222222222222222333333333333333444444444444444411111111111111112222222222222223333333333333334444444444444444css部分div{font-size: 15px;margin-bottom: 20px;}....

    在html中

    下面内容会单独滚动

    1111111111111111

    222222222222222

    333333333333333

    4444444444444444

    1111111111111111

    222222222222222

    333333333333333

    4444444444444444

    css部分

    div{

    font-size: 15px;

    margin-bottom: 20px;

    }

    .content{

    height: 300px;v // 必须设定滚动部分的高度

    background-color: cadetblue;

    color: antiquewhite;

    overflow-x: hidden; /*x轴禁止滚动*/

    overflow-y: scroll;/*y轴滚动*/

    }

    .content::-webkit-scrollbar {

    display: none;/*隐藏滚动条*/

    }

    p{

    margin-bottom: 30px;

    font-size: 17px;

    color: #333;

    }

    展开全文
  • 本篇文章给大家带来的内容是关于纯css+div隐藏滚动条的实现方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当...

    本篇文章给大家带来的内容是关于纯css+div隐藏滚动条的实现方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观。

    尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。

    方法

    这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。

    而内容div设置 overflow-y: scroll;overflow-x: hidden;

    然后再设置外层div的width小于内层div的width。

    这个内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。

    效果

    内层div效果:

    936f2c6f79a2133010c842533fd32d8d.png

    套上外层div效果后:

    11cd031bac0372c7b566c6869f6452a3.png

    代码

    css代码:.nav_wrap{

    height: 400px;

    width: 200px;

    overflow: hidden;

    border: 1px solid #ccc;

    margin: 20px auto;

    }

    .nav_ul{

    height: 100%;

    width: 220px;

    overflow-y: auto;

    overflow-x: hidden;

    }

    .nav_li{

    border: 1px solid #ccc;

    margin: -1px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    font-size: 12px;

    width: 200px;

    }

    .btn_wrap{

    text-align: center;

    }

    html代码:

    之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。 也是让滚动条被遮住了。

    今天又顺手把目前在做的项目中的导航菜单的滚动条去掉了。 简单总结下来

    展开全文
  • vue 改变div滚动条位置

    千次阅读 2020-09-20 17:16:27
    在vue里要改变div滚动条 <ul ref="ulScroll1"></ul> this.$refs.ulScroll1.scrollLeft=15 //距离左 横滚动条 this.$refs.ulScroll1.scrolltop=15 //距离右 竖滚动条 这里会出现一个问题是 我们的...

    在vue里要改变div的 滚动条

    <ul ref="ulScroll1"></ul>
    
    this.$refs.ulScroll1.scrollLeft=15 //距离左  横滚动条
    this.$refs.ulScroll1.scrolltop=15 //距离右  竖滚动条
    

    这里会出现一个问题是 我们的数据是动态获取的
    这里设置了 滚动条 会没有任何变化
    那是因为 数据会没有渲染出来 滚动条还未出现

    解决的办法就是 在请求完数据后 做一个定时器 延迟一下 滚动条的设置 100毫秒就可以 时间太长的话页面的效果会不太友好

    展开全文
  • JQuery将DIV滚动条滚动到指定的位置


    js代码

    //将滚动条滚动到指定位置
    	function scrollToLocation(index) {
    		  var container = $('#options');	
    		  var scrollTo = $('#options li:eq('+index+')');
    		  //非动画效果
    		  container.scrollTop(
    		    scrollTo.offset().top - container.offset().top + container.scrollTop()
    		  );
    	}



    html代码:


       <ul id="options">
                  <li ng-repeat="x in subSelectList">
                    <a href="javascript:;" value="{{x.ywbm}}">{{x.ywmc}}</a></li>
                </ul>




    展开全文
  • style="overflow-y:auto;"将这一句话写在divul等标签中就能实现自适应的滚动条
  • 网站聊天样式,无论添加什么内容div滚动条都显示在最底端 将div添加滚动条,给div一定的高度 <div id='up' style='height:100px; width:400px;overflow-y:scroll; border: 1px solid #999;'><ul><...
  • 纯css,div隐藏滚动条,保留鼠标滚动效果。

    万次阅读 多人点赞 2016-04-28 21:46:03
    隐藏div滚动条,但是保留滚动功能。
  • (含上下左右滚动代码)123456789+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++上下滚动代码: var speed=40var demo=document.getElementById("demo");var demo2=...
  • 当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 ...
  • 没有滚动条,我无法使导航滚动条正常工作。我在这里找到了许多示例,但是它们没有用。我累了上课的家长:子类带有溢出-y:自动;有人知道我的CSS有什么问题吗?......................................................
  • 当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 二...
  • 以Vue为例子,其他依次类推 //监听数据更新 watch: { data: function (data) { //this.$nextTick是vue内置的一个方法,具体百度 ...//#chat-list为ul的id container.scrollTop = container.scrollHe
  • div滚动条在最低端

    千次阅读 2016-12-19 14:48:49
    //div滚动条(scrollbar)保持在最底部 function scrollToBottom(){ //var div = document.getElementById('chatCon'); var div = document.getElementById('up'); div.scrollTop = div.scr
  • 当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。这里...
  • 直接列出代码如下, 有需要的... ...CSS控制DIV层滚动效果 CSS层滚动条效果 <!-- ul { border: 3px double #999; height: 300px; width: 200px; overflow: auto; overflow-x: hidden; padding: 2px; s
  • li内容不换行、div滚动条

    千次阅读 2013-05-06 17:49:28
    昨天在使用css结合div布局的时候碰到了一个问题。  在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据...
  • 当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 ...
  • <!DOCTYPE html> <... <head> ...style type="text/css">...div.scroll { background-color:#00FFFF; width:100px; height:100px; overflow:auto; } </style> </head> <b...
  • 代码如下: ...ul,li,ol{padding:0;margin:0;} .nav_wrap{height:300px;width:200px;overflow:hidden;border:1px solid #ccc;margin:20px auto;float:left;} .nav_ul{height:100%;width:220px;overflow-y
  • class="help-gundongtiao" style=" height:350px; overflow:auto"> $('.help-gundongtiao').scrollTop($('.help-gundongtiao')[0].scrollHeight); overflow设置滚动条 js打开定位到最下方
  • 你好,从你的代码来看,并未...我建议你可以创建一个div 的块级元素,然后使用height百分比。具体你可以参照如下代码:hellotesttesttesttest.......testtesttest12结果:MSDN Community SupportPlease remember ...
  • div里面放ul,使ul横向和纵向滚动

    千次阅读 2019-01-21 10:45:04
    js代码: .infoShow{ border:1px solid #000; overflow-y:auto; height:340px; } .infoShow ul{ margin:0px; padding:0px; float:left; white-s...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,138
精华内容 11,255
关键字:

divul滚动条