前端直接写一个滚动条效果

2024-08-23

使用 js，自己写一个简单的滚动条

当我们给元素加上 overflow: auto; 的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 bar 是根据内容的多少,高度不一样的,这个需要动态的计算 2.滚动条 bar 的 top 位置和内容scrollTop 的关系. 思路: 使用嵌套的布局,如下: <!DOCTYPE html> <html> <head> <meta charset="

[前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方法是这样的--全部设置浮动: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:

纯后端尝试写一个前端slide插件

概述由于项目组前端人员缺失,又赶上需要在手机端做一个slide效果的页面,所以只能自己硬着头皮上了,写的很简单,请大家不要笑话,只是拿出来分享下,大家先看下完成后的效果,如下: 过程看了效果图是不是很简单,确实很简单了,下面我就贴下代码,请大家忍住别笑. Html <div class="side-wrapper"> <div class="side-row"> <div class="side-title"&g

以前写SpringMVC的时候，如果需要访问一个页面，必须要写Controller类，然后再写一个方法跳转到页面，感觉好麻烦，其实重写WebMvcConfigurerAdapter中的addViewControllers方法即可达到效果了

以前写SpringMVC的时候,如果需要访问一个页面,必须要写Controller类,然后再写一个方法跳转到页面,感觉好麻烦,其实重写WebMvcConfigurerAdapter中的addViewControllers方法即可达到效果了

改变滚动条的原始样式： chrome 可以改变， IE只能变相关颜色，firfox好像也不好改。最好是自己写一个或是用插件

相关作者链接地址: https://www.lyblog.net/detail/314.html 问题: 1.我在项目中遇到的问题: 在设置了::-webkit-scrollbar 后,滚动条不见了!!!??项目中滚动的元素是有背景颜色的.一开始一脸懵逼, 自己写了个test发现是有作用的. 再回去查看元素属性,在开发者工具最下面发现能够作用到元素上,但是为什么会看不见么???? 结果,我给::-webkit-scrollbar里面加了background颜色,滚动条就出现了. 当然IE仍然那么

用javascript写一个前端等待控件

前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javascript的命名空间,所以记录一下. 这个等待控件主要是:进行某个操作前,显示一个信息提示:"数据加载中,请稍候...",操作成功后,在回调函数中将提示消失. 原理是这个等待控件完全由JS动态加进去,包括CSS,页面中并无预先设定. 那么这个CSS怎么动态加载呢?等待控件中,样式使用了cl

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器. 项目地址:https://github.com/jrainlau/c... 在线体验:https://codepen.io/jrainlau/p... 一.为什么要用JS写JS的解释器接触过小程序开发的同学应该知道,小程序运行的环境禁止n

从 0 到 1 到完美，写一个 js 库、node 库、前端组件库

之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonjs/amd => es6,而在这几个规范中: iife: js 原生支持,但一般不会直接使用这种规范写代码 amd: requirejs 定义的加载规范,但随着构建工具的出现,便一般不会用这种规范写代码 commonjs: node 的模块加载规范,一般会用这种规范写 node 程序 es6: ECMA

玩玩CSS,写一个图标堆叠效果

遇到有人问如下效果怎么写,一时兴起,自己写一个玩玩. 看到这个样子,首先应该考虑一下 DOM 结构,以我的观点,把DOM结构设计为如下形式: <div> <img src="./img1.png" /> <img src="./img2.png" /> <img src="./img3.png" /> </div> 即,一个 DIV 中包含图片,对于左侧的文字,这里考虑使用 ::befo

从零开始写一个前端脚手架四、初始化进程提示(chalk)

我们之前说过bin里面的index.js文件是作为入口文件存在的.实际上的初始化内容在.action里面操作的,为了方便管理,我们把实际操作的代码抽出来放一块儿管理创建指令文件在根目录创建一个commands文件夹,然后在里面新建一个init.js文件.所以现在的目录为然后init.js里面的代码为 module.exports = ()=>{ console.log('初始化开始') } 指令文件引用在bin/index.js里引用该文件,并使用 #!/usr/bin/env node

大前端工程化之写一个简单的webpack插件

今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化首先我们得知道一个插件是如何组成的: 定义javascript命名函数给这个函数的prototype添加apply方法在这个方法内我们可以勾入webpack暴露的钩子,这些钩子主要由compiler,compilation两个对象暴露在某个需要勾入的构建回调中加入自己的处理函数,处理需要处理的资源处理完成后调

Cordova webapp实战开发：（6）如何写一个iOS下获取APP版本号的插件？

上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的学习如何获取iOS当前版本号学习iOS下插件类的编写学习iOS下插件的配置学习iOS下插件的调用主要内容 APP中[检查更新]显示当前版本号插件类的编写在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码. 我们在Plugins下新建两个文件,一个头文件

写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是对模板引擎的原理,还是有深刻的理解的.如果有什么还需要改进的地方,记得提出来. 一.什么是Smarty模板引擎: Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP

写一个ajax程序就是如此简单

写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术. 2:基于web标准XHTML+CSS的表示: 3:使用 DOM进行动态显示及交互: 4:使用 XML 和 XSLT 进行数据交换及相关操作: 5:使用 XMLHttpRequest 进行异步数据查询.检索: 程序员应用ajax的途经: 1:.Net下的Ajax

[闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??

0.咸鱼要说的一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们keep一下,学习一下菜鸟???是怎么给React写组件的. 咸话少说,咱们开始吧 1.搭一个React,TS的环境作为一条咸鱼,我肯定不会一步一步给你说清楚的. 要搭? 看这篇文章,反正我是照着这篇文干的文章链接:https://www.jianshu.com/p/71bbcdc8c1fc 然

放弃antd table，基于React手写一个虚拟滚动的表格

缘起标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,

写一个小CTF平台

0x00.前言协会要举办信息安全大赛了,初赛的web+crypto+misc主要由我来出题,注册.比赛的平台也都要由我来写上周日完成了注册页面的后端(前端由另一个女生写的),前天下午大概完成了比赛平台的所有基本功能(前端也是由我写的...) 独立写完比赛平台,有些收获打算写在这里,先留个坑,等比赛完了再填坑后端:PHP 数据库:MySQL 0x01.登录页面登录界面的前端是直接找的一个比较简朴的框架. 后端检验用户的输入,队伍名是只允许出现中英文.数字及下划线的,我用的pre

JS之滚动条效果

滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条. 简易进度条首先要实现的是上面的这种效果:当鼠标拖拽手柄前后移动时,滚动条的填充色和右侧的百分比随之一起变化. 为了实现上面效果,我们先来分析页面结构:一个基本的大容器,用来存放所有相关的东西:左侧是进度条相关部分,右侧用来显示百分比的数字,其中左侧又分为通过宽度变化来显示进度的一部分和可拖动的手柄部分.因为手柄部分是可以拖动

Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验

(一)前言在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y/markdown-toolkit 找到,最后的效果会像 http://yzhu.pythonanywhere.com 展示的一样. 本文分为三个部分: Python+Flask+Gunicorn 项目实战(一) 从零开始,写一个Markdown解析器 —— 初体验 Python+Flask+Gun

面试题：你能写一个Vue的双向数据绑定吗？

在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望能让大家有所收获. 1.原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例.为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-mod

前端直接写一个滚动条效果

热门专题