js+html实现点击按钮列标滚动(scrollTop)

news/2024/7/19 15:17:57 标签: js, css, html
htmledit_views">

效果图 

实现点击上下按钮,滚动条滚动。

代码如下 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 100px;
            height: 120px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        ul li {
            list-style: none;
            width: 100%;
            height: 30px;
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="pret">上</button>
    <ul id="box">
        <li>
            222
        </li>
        <li>
            222
        </li>
        <li>
            222
        </li>
        <li>
            222
        </li>
        <li>
            222
        </li>
    </ul>
    <button id="next">下</button>
</body>
<script>
    let pret = document.getElementById("pret");
    let next = document.getElementById("next");
    let box = document.getElementById("box");

    next.addEventListener("click", () => {
       if(box.scrollTop>150){ //这里我是写死的,你可以获取ul下li的个数*每个高度 //大于这个就不让它加了
           return
       }
        box.scrollTop = box.scrollTop + 30;
   
    })
    pret.addEventListener("click", () => {
       if(box.scrollTop<=0){ //这里我是写死的,你可以获取ul下li的个数*每个高度 //大于这个就不让它加了
           return
       }
        box.scrollTop = box.scrollTop -30;
   
    })
</script>

</html>


http://www.niftyadmin.cn/n/1557510.html

相关文章

[iOS10 NSLog]iOS10 真机调试NSLog输出不了中文解决办法

最新Xcod8iOS10 的双重组合坑,打的我不要不要的 说说问题吧 最近把iPhone5s升级到了iOS10系统 ,之前是iOS7的系统 然后神奇的问题就出来了,本来好好Log信息能打印后台返回的信息 并且是中文 在升级iOS10 以后,就变成了打印出一堆非 utf-8的乱码 下面是心路历程了,各种…

html字符串只匹配,标签里的内容,不匹配标签属性

场景 有的时候&#xff0c;返回html字符串&#xff0c;前端需要检索出需要的值。如果是英文&#xff0c;并且标签上有style属性、class。匹配时也会匹配上&#xff0c;正确的是应该只匹配内容。 例如&#xff1a; 我匹配r就会匹配到style里的color和red里的r也会匹配明显不对…

[iOS 数据处理]excel文件在iOS中使用

最近开发火车票功能,上游给了个站点的excel文档,不想去从后台搞,也不想去用sql 这里可以用excel 在线转换 json格式来获取数据 excel在线转换json

老男孩的教学感悟,和所有伙伴们共勉!加油!

我清晰的记得&#xff0c;在读初中的时候&#xff0c;上英语课时&#xff0c;老师说&#xff0c;”下节课咱们讲新课&#xff0c;请同学们预习下新课所有的单词和课文内容&#xff0c;下次课一上课就要默写全部单词&#xff0c;并且要找同学背诵整篇课文”。我是很要强不服输的…

前端粒子效果(particles.js)

炫酷的粒子效果实现 下面这两种效果 particles.js https://www.jq22.com/yanshi9838 上面这种可以使用&#xff1a; particles.js webgl 或者canvas&#xff0c;css3该都可以 &#xff08;下面是我找到的实现过程&#xff09; https://blog.csdn.net/yeana1/article/deta…

[iOS AppStore被拒]Your app or its metadata does not appear to include final content.

审核被拒 贴出原因 Performance - 2.1Your app or its metadata does not appear to include final content. Specifically, your app contains placeholder content in the 我的 tab&#xfffc;.Weve attached screenshot(s) for your reference.Next StepsPlease review y…

4-Java常用工具类-集合

集合: 集合的概念;体系结构;实际应用 通过案例为大家展示集合中类和接口的使用。 生活中的集合: 人或事物聚集到一起; 数学中的集合: 具有某种特性的事物的整体 Java: Java中的集合是工具类,可以存储任意数量的具有共同属性的对象。 超市购物的购物车就是容器: 存储商品的信息&…

[iOS 转换东八区] 将手机当前时区全都转为东八区

// 获取当前时间 - (NSArray*)getCurrentTime{NSDate *date [NSDate date];NSDateFormatter *format [[NSDateFormatter alloc] init];[format setDateFormat:"yyyyMMdd-HHmmss"];//将获取后的本地时间 转换成东八区时间format.timeZone [NSTimeZone timeZoneWith…