html位置不随滚轮移动,DIV固定在页面某个位置，不随鼠标滚动而滚动

最新推荐文章于 2021-08-27 10:58:24 发布
最新推荐文章于 2021-08-27 10:58:24 发布
阅读量2.2k 收藏 2
点赞数 1
文章标签： html位置不随滚轮移动

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Fixed header and footer for IE

MARGIN: 0px

}

HTML {

PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px

}

BODY {

PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px

}

* HTML {

PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px

}

* HTML BODY {

PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px

}

* HTML #outer {

HEIGHT: 99.9%; OVERFLOW: auto; voice-family: inherit

}

* HTML #contain-all {

Z-INDEX: 1; POSITION: a

最低0.47元/天 解锁文章
皮实妞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html不随页面滚动条滚动,怎么通过CSS实现div的固定位置,不随页面滚动消失
weixin_35789559的博客
06-03 2743
如何通过CSS实现div的固定位置,不随页面滚动消失每个 Web Developer / Designer 都知道 CSS 的 position:fixed的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但...
html固定左侧不滑动,css fixed 定位 让局部UI固定 不跟随滚动条移动
weixin_39622760的博客
05-30 1256
文章目录在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题达到的效果 如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,...
HTML网页中如何实现内容不随滚动条移动
路虽远，行则必至！
06-29 8698
div的样式中使用相当于浏览器窗口定位——position:fixed 一、position:fixed属性的含义 fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 我们平时所说的固定定位指的就是 fixed，设置了固定定位的元素不会随滚动条上下滚动。 二、一般的 position:fi...
HTML页面滚动时一部分内容位置固定不动不滚动的完成
yunduanaoligei的博客
08-27 3716
本文关键介绍了HTML 页面滚动时一部分內容部位固定不动不滚动的完成，原文中根据实例编码介绍的十分详尽，对大伙儿的学习或是工作中具备一定的参照学习使用价值，必须的小伙伴们下边伴随着我来一起学习学习吧 文中关键介绍了HTML页面滚动时一部分內容部位固定不动不滚动，对合理布局有一定的协助功效，废话不多说，开始： 页面源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title
html设置div固定鼠标滚动固定,html – 只滚动内容div,其他应该是固定的
weixin_39710561的博客
06-04 264
我有三个div我需要标题和left_side div来修复和内容div滚动.我一直在寻找解决方案,发现有溢出和位置的东西.但我不能使用它的核心.我该怎么做？我会感谢各种答案.HTML------CSS-----body {width: 100%;height: auto;padding: 0;margin: 0px auto;font-family: Calibri, Georgia, Ubunt...
html固定位置不随页面,Jquery定位插件，固定元素在页面某个位置，不随滚动条滚动...
weixin_28754365的博客
06-04 571
(function($) {"use strict";$.fn.pin= function(options) {var scrollY = 0, elements = [], disabled = false, $window =$(window);options= options ||{};var recalculateLimits = function() {for (var i = 0, l...
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
weixin_34132768的博客
08-04 1282
大V平时对这方面内容掌握的比较少，显得孤陋寡闻了，今天才遇到，不过遇到了就积累至此，大家切勿冲动:D 注意到我的页面上右下角有一个很可爱的Windows Live Messenger的Web聊天的层，随着页面滚动条的滚动，它始终还呆在原地，它的制作方法在这篇文章中《博客中加WindowsLiveMessenger的方法》有一些简要的介绍。 这里稍微总结一下，那就是利用JavaScript脚本，...
JS鼠标滚轮水平滚动特效特效代码
03-20
在本案例中，"JS鼠标滚轮水平滚动特效"是指一种利用JavaScript实现的交互效果，允许用户通过鼠标的滚轮来实现网页内容的水平移动，而非常规的垂直滚动。这种效果在展示横向排列的内容时特别有用，例如产品列表、幻灯...
Div滚动条随鼠标滚动js版（由网友JQuery版改写而成）
01-21
3. **滚动位置计算**：在处理滚轮事件时，需要获取当前`div`的滚动位置，并根据滚轮的滚动方向和速度计算出新的滚动位置，然后使用`scrollTop`属性设置`div`的滚动位置。 4. **浏览器兼容性处理**：由于不同浏览器...
JS鼠标滚轮水平滚动特效.zip
11-24
本示例“JS鼠标滚轮水平滚动特效.zip”提供了一种使用JavaScript、CSS和HTML5来实现的特殊滚动效果，使得用户可以通过鼠标的滚轮进行水平方向上的浏览。这个功能在展示宽幅图像、横向长图或水平布局的项目时特别有用...
JS实现部分HTML固定页面顶部随屏滚动效果
11-24
本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果。分享给大家供大家参考，具体如下： 我们经常在淘宝网看到这样的特效，商品列表特别长，而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了，那么它会自动判断是否到顶端了，然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的，在实际开发中有不少用途，下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码，兼容性不错，在IE、Firefox、Chrome下都能正常工作。 使用这个特效代码需要注意，如果在侧边栏使用，则需要注意，侧栏中的栏目不能使用JavaScript动态加载，必须用静态的格式，否则
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
详解如何用div实现自制滚动条
09-24
在网页设计中，滚动条是一个不可或缺的交互元素，它允许用户浏览超过当前视口内容的页面。然而，浏览器默认的滚动条样式往往不能满足设计师们对美观度和个性化的需求。本文将深入探讨如何使用`div`来实现自定义滚动...
jQuery鼠标滚动页面数字动画特效.zip
07-05
本文将深入探讨“jQuery鼠标滚动页面数字动画特效”，这是一种利用jQuery和countup.js库创建的互动效果，当用户滚动鼠标滚轮到特定位置时，页面上的数字会呈现出流畅的累加动画。 首先，jQuery是一个广泛使用的...
当网页向上滚动时，让header固定的停留在网页的上方
weixin_43942765的博客
11-19 1853
想当年，小编实习时总是遇见此类问题，当时为了画页面也是苦到没话说，小编在实习时就遇见过此类的问题，没有想到小编现在又遇到了，小编只好再做一下了，但有点小傲娇的小编下次只想看自己的博客 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&gt...
html 上下固定中间滚动,flex布局实现上下固定中间滑动的布局方式
weixin_39791386的博客
06-09 1146
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下:例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。简单介绍一下如何实现固定头部和尾部，中间部分可滑动，使用flex布局1.设置html，body高度为100%2.设置最外层div的布局方式为弹性布局display:flex;3.设置最外层div的主轴方向为flex-direction: column...
css实现图片根据鼠标滚轮滚动
最新发布
05-26
可以通过CSS的`transform`属性和`translateY`函数来实现图片随鼠标滚轮滚动的效果。具体步骤如下： 1. 首先在HTML中插入一张需要滚动的图片，例如： ```html <div class="image-container"> <img src="your-image-url.jpg" alt="your-image" /> </div> ``` 2. 然后在CSS中设置`.image-container`的高度和宽度，并将其设置为相对定位(position: relative)。同时也需要将图片设置为绝对定位(position: absolute)，并将其垂直居中。 ```css .image-container { height: 100vh; width: 100%; position: relative; overflow: hidden; } .image-container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 接下来，我们需要监听鼠标滚轮事件，并根据滚轮的滚动方向来移动图片。这里我们可以使用JavaScript来实现。 ```js const imageContainer = document.querySelector('.image-container'); let currentScrollPos = window.pageYOffset; window.addEventListener('scroll', () => { const newScrollPos = window.pageYOffset; const scrollDiff = newScrollPos - currentScrollPos; imageContainer.style.transform = `translateY(-${scrollDiff}px)`; currentScrollPos = newScrollPos; }); ``` 在上面的代码中，我们首先获取到`.image-container`元素，并记录当前的滚动位置。然后在滚动事件的回调函数中，我们计算出滚动的距离(scrollDiff)，并将其作为参数传递给`translateY`函数，以移动图片。最后，我们更新当前的滚动位置。 这样就完成了图片随鼠标滚轮滚动的效果。需要注意的是，在移动图片时，我们使用了`translateY`函数，并将其参数设置为负值，以实现向上移动的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值