精华内容
下载资源
问答
  • JS 滚动条
    2021-12-01 11:51:57

    一、禁止滚动条滚动,滚动条不消失

    
    function prohibit_scroll() {
        //禁止滚动条滚动
        var top = $(document).scrollTop();  // 获取滚动条距离顶部位置
        $(document).on("scroll.unable",function (e) {
            $(document).scrollTop(top);
        })
    }
    
    function remove_pscroll() {
        //解除禁止滚动条滚动
        $(document).unbind("scroll.unable");
    }

    二、禁止滚动,滚动条消失

    // 方法一
    $('html,body').css({'overflow': 'hidden'}); //使滚动条消失
    
    $('html,body').css({'overflow': 'auto'}); //使滚动条出现
    
    
    // 方法二,分横竖滚动条
    $("body").parent().css("overflow-x","hidden"); //使滚动条消失
    $("body").parent().css("overflow-y","hidden");
    
    $("body").parent().css("overflow-x","auto"); //使滚动条出现
    $("body").parent().css("overflow-y","auto");

    更多相关内容
  • 这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表里的...
  • Optiscroll是一款轻量级纯Js滚动条美化插件。该滚动条美化插件可以隐藏原生的滚动条,并生成用户自定义样式的滚动条。它的特点还有:轻量级,没有任何依赖,压缩后的版本仅9kb。
  • 虽然平滑性处理的不好,但非常适合学习 代码如下: <!... <head> <...charset=UTF-8″>...script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.mi
  • js滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!DOCTYPE ...
  • 一外国佬写的。有几种样式,点击那些example1234.html就能看见了。可以研究一下下http://www.n-son.com/scripts/jsScrolling/
  • 这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理...如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type="text/css"> html,body, div, dl, dt, d
  • 小知识点,废话不多说,直接上代码 css: 代码如下: ”code” class=”css”>&...</pre><br> js: 代码如下: ”code” class=”javascript”>var auchorTop = $(“#anchor”).css(“top”); auchorTop = Number(auchorTo
  • <head> [removed] var currentPosition,timer; function GoTop(){ timer=setInterval(“runToTop()”,1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body....
  • JS: 代码如下:(function(win){ var doc = win.document,db = doc.body; var mousewheel = ‘onmousewheel’ in document ? ‘mousewheel’ : ‘DOMMouseScroll’; var skyScroll = function(opts){ return new ...
  • 为大家详细主要介绍了JavaScript实现垂直滚动条效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • javascript滚动条

    2014-01-20 22:18:57
    javascrip滚动条,配置简单,使用方便
  • js 自定义滚动条样式

    2018-05-17 11:47:36
    js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改
  • 主要为大家详细介绍了js滚动条平滑移动示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • mousescroll.js网页滚动条插件是一款基于jQuery实现,通过构造函数封装,同一页面也可以多次调用。
  • 代码如下:[removed] // 说明:用 Javascript 获取滚动条位置等信息 // 来源 :ThickBox 2.1 function getScroll() { var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) { t = ...
  • 设置页面加载时滚动条自动滚到底的方法: jQuery: 代码如下: $(function(){  var h = $(document).height()-$(window).height();  $(document).scrollTop(h); }); JavaScript: 代码如下: [removed] = ...
  • 本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:[removed]。当onscroll事件发生时,用js获得页面的scrollTop值...
  • JavaScript 滚动条定位指定位置

    千次阅读 2021-01-14 14:56:40
    当子元素尺寸超过父元素的时候能够出现滚动条。可能会根据需要将滚动条定位到某处,蚂蚁部落的侧栏导航就具有类似功能。下面通过代码实例简单演示一下简单定位效果:[HTML] 纯文本查看 复制代码运行代码蚂蚁部落#box...

    当子元素尺寸超过父元素的时候能够出现滚动条。

    可能会根据需要将滚动条定位到某处,蚂蚁部落的侧栏导航就具有类似功能。

    下面通过代码实例简单演示一下简单定位效果:[HTML] 纯文本查看 复制代码运行代码

    蚂蚁部落

    #box{

    width: 150px;

    height: 80px;

    border: 2px dotted green;

    overflow: auto;

    position: relative;

    }

    ul {

    list-style-type: none;

    font-size :12px;

    margin: 0px;

    }

    window.onload =()=> {

    let oBox = document.getElementById("box");

    let lis= oBox.getElementsByTagName("li");

    lis[3].style.color = "red";

    let top = lis[3].offsetTop;

    oBox.scrollTop = top;

    }

    • 蚂蚁部落一
    • 蚂蚁部落二
    • 蚂蚁部落三
    • 蚂蚁部落四
    • 蚂蚁部落五
    • 蚂蚁部落六
    • 蚂蚁部落七
    • 蚂蚁部落八
    • 蚂蚁部落九
    • 蚂蚁部落十

    代码运行效果截图如下:

    代码分析如下:

    (1).上述代码可以将滚动条定位到第四个 li 元素。

    (2).其实就是内容向上规定指定距离,此距离是第四个 li 默认情况下距离 box顶部的距离。

    (3).let top = lis[3].offsetTop,通过 offsetTop 属性获取这个距离。

    (4).box 需要是定位元素。

    (5).oBox.scrollTop = top 向上滚动这个尺寸即可。

    相关阅读:

    (1).offsetTop 参阅 JavaScript offsetTop 一章节。

    (2).scrollTop 参阅 JavaScript scrollTop 一章节。

    展开全文
  • js隐藏滚动条功能

    2018-12-27 17:35:42
    js完美实现在web端上隐藏滚动页面时的滚动条功能,代码精简易用
  • 本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向; var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...
  • 主要介绍了JS实现判断滚动条滚到页面底部并执行事件的方法,本文先是分析了需求以及必备知识,然后给出实现代码,需要的朋友可以参考下
  • JS滚动条属性值

    2013-05-01 16:48:38
    JS滚动条属性值,取得滚动条各种数据值,简单处理JS操作滚动条
  • scrollbot是一款纯js滚动条美化插件。scrollbot不使用mousewheel来制作滚动效果,它实际上是隐藏原生的滚动条,并为指定的容器添加一个可自定义的滚动条效果。
  • 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中...
  • 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以  别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this)....
  • smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
  • 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,...
  • //在滚动过程中,用户也可以执行滚动操作,这个会强制到顶部才结束 var timer = setInterval(function () { var left = window.pageYOffset; var step = Math.ceil((left - 0) / 10); window.scroll(0, left - step)...
    //在滚动过程中,用户也可以执行滚动操作,这个会强制到顶部才结束
    
     var timer = setInterval(function () {
            var left = window.pageYOffset;
            var step = Math.ceil((left - 0) / 10);
            window.scroll(0, left - step);
            if (left == 0) {
              clearInterval(timer);
            }
          }, 10);
    
    • scrollIntoView()
    //新写法,操作滚动过程中,用户进行滚动,会停止该行为,但适配性不高,
    let el = document.body || document.documentElement;
          el.scrollIntoView({ behavior: "smooth" });
    

    语法参数

    alignToTop[可选],目前之前这个参数得到了良好的支持
    true元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值
    false元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}

    示例

    var element = document.getElementById("box");
    
    element.scrollIntoView();
    element.scrollIntoView(false);
    element.scrollIntoView({block: "end"});
    element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
    

    兼容性

    特性ChromeFirefoxSafariEdgeIEOpera
    基本支持( alignToTop )yesyesyesyesyesyes
    scrollIntoViewOptionsyesyes5.1[1]12[1]9[1]48[2]

    [1]不支持"smooth"行为或"center"选项。

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 164,576
精华内容 65,830
关键字:

JS 滚动条