精华内容
下载资源
问答
  • 鼠标滑轮控制Div水平滚动

    千次阅读 2017-05-12 12:15:15
    滑轮控制Div水平滚动
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>滑轮控制Div水平滚动</title>
      <style type="text/css">
        .wrap{width:500px;height:80px;background:#e7e7e7;overflow: auto;overflow-y: hidden;}
        .hor_box{width:1200px;height:50px;}
        .btn{width:100px;height:50px;background:#ff9900;float:left;margin:3px 10px;}
    
        .ver_box{width:100px;height:500px;overflow: auto;overflow-x: hidden;}
        .ver_box .btn{width:90px;height:50px;margin:5px 0px;}
      </style>
    </head>
    <body>
      <div id="abc" class="wrap">
        <div id="scrollbar" class="hor_box">
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
          <div class="btn"></div>
        </div>
      </div>
    </body>
    </html>

    <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript">
    
      var firefox = navigator.userAgent.indexOf('Firefox') != -1; 
      
      function MouseWheel(e){
        e=e||window.event;
        if(e.stopPropagation){
          e.stopPropagation();
        }else{
          e.cancelBubble=true;
        }
        
        if(e.preventDefault){
          e.preventDefault();
        }else{
          e.returnValue=false;
        }
        
        // document.title=(e.wheelDelta+'|'+e.detail);
        
        if(firefox){
          if(e.detail<0){
            $('#abc').scrollLeft($('#abc').scrollLeft()+60);
          }else{
            $('#abc').scrollLeft($('#abc').scrollLeft()-60);
          }         
        }else{
          if(e.wheelDelta>0){
            $('#abc').scrollLeft($('#abc').scrollLeft()+60);
          }else{
            $('#abc').scrollLeft($('#abc').scrollLeft()-60);
          }
        }
      }
      
      window.οnlοad=function(){
        var abc=document.getElementById('abc');
        firefox?abc.addEventListener('DOMMouseScroll',MouseWheel,false):(abc.onmousewheel=MouseWheel);
      }
    </script> 

    注:由于 Firefox浏览器的鼠标滑轮机制与IE, Oprea, Chrome等浏览器不一样,需要预先判断当前浏览器的类型
    在窗体初始化时,对id="abc"的Div监听滑轮的事件
    e.detail 事件是Firefox的DOMMouseScroll
    e.wheelDelta 是其他浏览器

    参考“mousewheel滚轮事”:http://www.bkjia.com/jQuery/821747.html

    展开全文
  • div 水平滚动

    2020-12-14 15:24:02
    stype=“overflow: auto;”
       .main_con_three_table {
            width: 95%;
            margin-bottom: 40px;
            margin-top: 15px;
            overflow: auto;
        }
        给外层div 加个样式
    
    展开全文
  • div或其他html块内容跟随滚动条移动,滚动移动时,内容跟着移动,并保持最右边
  • 我使用以下内容来显示水平滚动条: CSS:div {width: 300px;overflow-x: scroll;}div::-webkit-scrollbar {width:15px;}div::-webkit-scrollbar-track {-webkit-border-radius:5px;border-radius:5px;background:...

    我使用以下内容来显示水平滚动条:

    7feb90ec776ab81e946d82651dd78767.png

    CSS:

    div {

    width: 300px;

    overflow-x: scroll;

    }

    div::-webkit-scrollbar {

    width:15px;

    }

    div::-webkit-scrollbar-track {

    -webkit-border-radius:5px;

    border-radius:5px;

    background:rgba(0,0.1);

    }

    div::-webkit-scrollbar-thumb {

    -webkit-border-radius:5px;

    border-radius:5px;

    background:rgba(0,0.3);

    }

    div::-webkit-scrollbar-thumb:hover {

    background:rgba(0,0.3);

    }

    div::-webkit-scrollbar-thumb:window-inactive {

    background:rgba(0,0.3);

    }

    但是,正如您在demo here中看到的那样,滚动条仅在div的底部可见.有没有办法将它定位在顶部?

    展开全文
  • Jquery滚动插件–Xslider Jquery div、图片水平滚动到最后一张
  • div+css解决出现水平滚动条问题
  • div里元素水平滚动

    2019-12-17 15:47:46
    4.div里元素水平滚动 css: .father{ width:1000px; height:120px; overflow-y:hidden; overflow: auto; white-space: nowrap } .son{ width: 64px; height: 64px; margin-top: 20px; m...

    4.div里元素水平滚动

    css:

    .father{
        width:1000px;
        height:120px;
        overflow-y:hidden;
        overflow: auto;
        white-space: nowrap
    }
    .son{
        width: 64px;
        height: 64px;
        margin-top: 20px;
        margin-left: 20px;
        display: inline-block
    }
    

    html:

    <div class="father">
        <div class="son"></div>
    </div>
    
    展开全文
  • div:给div滚动条 div滚动条设置

    万次阅读 多人点赞 2011-04-13 09:15:00
    今天做了个例子: div滚动条问题: 两种方法: 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 <br />不过...
  • div滚动条问题: 两种方法: 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 不过在不超出时,会有下面的滚动条,所以不是最好...
  • div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”&gt;&lt;/div&gt; 记住宽和高一定要设置噢,否则不成的 这样比较好的是,在宽和高不超出时...
  • 滚动条可以用任何财产触发overflow,overflow-x或overflow-y每个可以被设置为任意的visible,hidden,scroll,auto,或inherit。您当前正在查看以下两个:auto-此值将查看盒子的宽度和高度。如果已定义它们,则不会...
  • div table 水平滚动

    2010-11-18 10:08:34
    div style="overflow:auto; width:600px; height:530px;border:1px solid #777"&gt; &lt;table width="5000" border="0" cellspacing="0" cellpadding="0&...
  • 我有一个Parent Div chatRooms,里面有很多chatRoom's,而chatRoomName ...以前chatRoom旁边,然后有一个水平滚动条的情况下,所有chatRoom的超过父DIV chatRooms的宽度的最大宽度,这实际上是工作,但超过chatRoo...
  • 1. 【问题】水平多个div块,... 设置多个div块的外面再套一层div,设置它的宽度等于多个div宽度的和,此时多个div块外面第二层的div设置overflow:auto,这样将出现水平滚动条;:style=" 'width:' + '76'*normList...
  • div滚动条问题:  两种方法:  一、  复制代码 代码如下:   记住宽和高一定要设置噢,否则不成的    不过在不超出时,会有下面的滚动条,所以不是最好的选择  二、  复制...
  • 当存在水平溢流我想上div(并且只有div)滚动条在该div的底部,同时既divs继续时也有垂直溢出到一起垂直滚动保持固定。问题是我想让左边的div在它的位置上保持固定。许多现代的文本编辑器都有这个功能(注意底部的滚动...
  • div:给div滚动条 div滚动条设置 2009-09-10 22:04 今天做了个例子: div滚动条问题: 两种方法: 一、 记住宽和高一定要设置噢,否则不成的 不过在不超出时,会有下面的滚动条,所以...
  • div添加滚动

    千次阅读 2019-10-22 09:25:50
    Demo: <!--记住宽和高一定要设置,否则不行--> <div style=" overflow-y:auto;...1上面是对水平滚动条和垂直滚动条分别设置,可以直接替换为"overflow:auto" 2如果要单独设置水平滚...
  • html中div滚动

    万次阅读 2019-06-14 16:37:22
    div滚动条的两种方法: 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 不过在不超出时,会有下面的滚动条,所以不是最好的选择 ...
  • 如果要出现水平滚动条,则: overflow-x:auto同理,垂直滚动条为: overflow-y:auto如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative  例如: <HTML> <HEAD> <TITLE>...
  • 移动端,横向滚动的时候,希望有个小滚动条标志一下,说明是可以左右滑动的。 不是直接左右滑动切换页面,而是div左右滑动。 ...3、滚动条同步,实现上面div1滑动,下面div2滚动滚动 <!...
  • div如何添加滚动条?

    2021-04-06 10:05:58
    以下实例设置了 div 水平滚动条: 实例 <div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;"> 菜鸟教程 -- 学的不仅是技术,更是梦想!!! 菜鸟教程 -- 学的不仅是技术,更是梦想...
  • <div class="out" style="overflow:hidden;"> // 外层div不出现滚动条 ... // 内层div出现滚动条,且滚动条出现在内层div里面,滚动时外层div固定不动 <table style="width:100%" class...
  • Div添加滚动

    2017-08-16 16:35:00
    最直接的行内样式添加水平和垂直的滚动条: ... 注意:如果只写height就只有垂直滚动条,只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,456
精华内容 14,182
关键字:

div水平滚动