zoukankan      html  css  js  c++  java
  • 关于内嵌页面与原页面鼠标滚动条隐藏的问题解决

      根据需求需要在页面中嵌入一个别的html文件(台风路径图),于是我用iframe直接连接展示台风路径的页面,但该页面是需要通过鼠标滚轮的滚动来缩放地图的,而我原有的页面也有滚动条,两者虽然互不影响但用户体验太差,于是寻找解决方案;由于本职是写后台的加上能力确实有限,各种百度都没有解决,最后问了一个之前比较牛的一个前端同事,完美解决了我的需求,这里写出来

      其实就是通过mouseover和mouseout事件来控制body和iframe的css样式来解决的,代码如下

    // iframe 的鼠标移入事件(隐藏windows的滚动条)
    $("iframe的id").mouseover(function(){
       $("body").css("overflow","hidden");     
       $("iframe的id").css("overflow","auto");     
    })
    
    
    // iframe 的鼠标移出事件(显示windows的滚动条)
    $("iframe的id").mouseout(function(){
       $("body").css("overflow","auto");     
       $("iframe的id").css("overflow","hidden");     
    })

    这样操作之后,就能完美解决我的需求了,完全没有我之前想的那么复杂;

  • 相关阅读:
    JavaScript对象继承的实现
    Redis资料
    Difference between LINQ to SQL and the Entity Framework
    闭包,懂不懂由你,反正我是懂了
    Castle资料
    csu 1242 碱基配对
    csu 1242 碱基配对——一个错误的解答
    [转载]zoj 分类
    计算素数
    魔方阵
  • 原文地址:https://www.cnblogs.com/darling2047/p/5993636.html
Copyright © 2011-2022 走看看