导航:首页 > 编程语言 > js设置滚动条滚动距离

js设置滚动条滚动距离

发布时间:2023-07-17 01:32:51

① 如何使用js控制DIV内容的滚动条

1、首先需要抄新建一个HTML文档,这里设立一下基本的架构。

② 原生js或jQuery怎么让滚动条只能滚动固定的距离

::-webkit-scrollbar{width:0px}目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效,依旧可以滚动。你可以在JS里面写判定当用户鼠标不动一定时间然后消失。我对JS不是特别了解(只能看懂和修改JS代码的程度的能力,但是无论任何JS代码都敢修改的程度),这效果能做出来的,我就不贴具体代码了。不需要嵌套,纯原生。将来浏览器会支持这个效果的。或者你用滚动条插件(不推荐)

③ 怎样用原生js获取滚动条滚动的距离

使用js获取的相关方法

//回到页面顶部
$("#goTotop").click(function(){
$('body,html').animate({scrollTop:0},1500);//点击按钮让其回到页面顶部
});

$(window).scroll(function(){
varyheight1=window.pageYOffset;//滚动条距顶端的距离
varyheight=getScrollTop();//滚动条距顶端的距离
varheight=document.documentElement.clientHeight//浏览器可视化窗口的大小
vartop=parseInt(yheight)+parseInt(height)-217;
vardivobj=$(".kf");
divobj.attr('style','top:'+top+'px;');
})

/**
*获取滚动条距离顶端的距离
*@return{}支持IE6
*/
functiongetScrollTop(){
varscrollPos;
if(window.pageYOffset){
scrollPos=window.pageYOffset;}
elseif(document.compatMode&&document.compatMode!='BackCompat')
{scrollPos=document.documentElement.scrollTop;}
elseif(document.body){scrollPos=document.body.scrollTop;}
returnscrollPos;
}

④ js有什么方法代替scrollTop,实现div 里面滚动。

你好,我先需要明确一下你是要问jQuery中scrollTop获取滚动条距顶端的距离,还是要使用scrollTop来设置滚动条距顶端的距离,或者说需要二者兼备。

1、如果是获取,原生js实现很容易:

1
2
3

var div = document.getElementById('wgt-ask'),
scrollTop = div.scrollTop;
console.log(scrollTop); // 100

前提是div已经具备滚动条,不然使用为0

2、如果是设置,原生js也很简单:

1
2

var div = document.getElementById('wgt-ask');
div.scrollTop = 100;

依然前提是div已经具备滚动条,否则设置无效

3、如果是二者兼备,这里就要简单的封装一下了:

1
2
3
4
5
6
7
8
9
10
11

function scrollTop(obj, len){
if (typeof len === 'undefined') {
return obj.scrollTop;
} else {
obj.scrollTop = len;
}
}

var div = document.getElementById("wgt-user");
scrollTop(div, 100); // 设置
var st = scrollTop(div); // 100 获取

希望是你想要的结果,如有疑问欢迎追问,望采纳~

⑤ js怎么控制网页滚动到指定位置

使用scrollby(x轴,y轴)方法就可以使文档对象滚动到距离浏览器窗口坐标的指定位置上

注意事项

  1. 文档对象可以看做是网页所有可见内容的存储容器,网页所有可见内容称为页面

  2. 网页x轴坐标与数学一样,但是y轴坐标是相反的,向下是正数,向上是负数

  3. 页面移动出去的距离不能和滚动条移动出去的距离对等

  4. 滚动条移动出去多少像素才能等达到页面要移动出去的像素是根据整个页面的尺寸比例计算的

  5. 这个文档对象移动出去的距离在坐标系上是一定是负数,但是我们要用正数来表示他距离浏览器窗口0,0坐标的距离

  6. 这个方法移动的是文档对象和浏览器存储文档对象的窗口0,0位置坐标的距离,绝不是滚动条和文档对象的距离,

  7. 移动出去的距离就是文档对象不可见部分内容和浏览器存储文档对象的窗口0,0坐标的距离

  8. 这个方法使用scroll命名只是因为文档对象移动出去的距离需要滚动条滚动才能达到效果,便于记忆而已

  9. scrollby()方法是window对象下的方法,document对象及其子对象没有该方法

  10. document对象及其子对象如果要获取或设置元素内部内容滚动出去的距离,请使用scrollTop和scrollLeft, 注意该方法是计算的不可见部分移动出去的内容顶端距离容器的距离是从容器内边距开始计算,而不是边框

  11. 使用scrollby()必须存在滚动条,且有一定的高度才能看出方法的效果

⑥ js获取滚动条距离浏览器顶部高度高度,改变导航css

if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
elseif(document.body)
{
scrollTop=document.body.scrollTop;
}
if(scrollTop>50)
{
document.getElementById('obj').style.opacity='0';
}

⑦ js或jq怎样可以使滚轮滚动固定距离

你好,实现如下来,请现在 body 加一定自的 br 出现上下滚动条 够长。不懂请追问。
希望采纳!!
<script src="http://libs..com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$('body').on('mousewheel', function(event) {
if(event.deltaY=="-1"){
$('body').animate({scrollTop: 5000})
}else if(event.deltaY=='1'){
console.log('上滑')
}
});
</script>

阅读全文

与js设置滚动条滚动距离相关的资料

热点内容
java写一个shape形状类 浏览:744
win7如何设置word背景颜色 浏览:484
如何创造电脑编程语言 浏览:56
昂达平板电脑图形密码忘记怎么办 浏览:92
组织文件内容是什么 浏览:183
0基础如何学习智能编程 浏览:366
java程序员全攻略下载 浏览:715
网络逆向教程 浏览:135
iso文件如何重装系统 浏览:750
ghost镜像文件路径如何恢复 浏览:832
搭建网站需要多少钱啊 浏览:599
编程猫怎么设置背景亮度 浏览:177
qq文件破损 浏览:414
javapoi配置 浏览:608
编程怎么写数据图案同步 浏览:308
海康监控录像回放丢数据怎么回事 浏览:155
in后缀是什么文件 浏览:142
linuxusb抓包工具 浏览:808
类似美团的app还有什么 浏览:974
asp显示数据库 浏览:142

友情链接