模拟滚动条

最新推荐文章于 2024-07-07 13:56:50 发布
苦瓜式的幽默
最新推荐文章于 2024-07-07 13:56:50 发布
阅读量241
点赞数
分类专栏：前端文章标签： html5 javascript css3 html
本文链接：https://blog.csdn.net/are_gh/article/details/113834309
版权
JavaScript 模拟滚动条家庭环境孩子影响父母关系
关键词由CSDN通过智能技术生成
前端专栏收录该内容
45 篇文章 2 订阅
订阅专栏
js实现模拟滚动条

<!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>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .wrap {
        margin-top: 50px;
        margin-left: 200px;
    }
    
    .txt {
        position: relative;
        float: left;
        overflow: hidden;
        width: 200px;
        height: 500px;
        border: 1px solid #000;
    }
    
    p {
        position: absolute;
        top: 0;
    }
    
    .box {
        position: relative;
        float: left;
        width: 30px;
        height: 500px;
        background-color: #999;
        margin-left: 50px;
    }
    
    span {
        position: absolute;
        /* top: 50px; */
        left: 0;
        width: 30px;
        height: 60px;
        background-color: brown;
    }
</style>

<body>
    <div class="wrap">
        <div class="txt">
            <p>婚姻一直以来都占据着一个家庭最核心的位置是，在一段和谐的婚姻关系中，亲子关系自然也会是和谐的。父母之间相处十分和谐对于孩子来说是非常重要的，这不但会影响到孩子的成长与性格，甚至还会对孩子的三观产生影响。 金龟子这个名字大家都不陌生，她是我们非常熟悉的央视主持人，之前金龟子在网络上分享过这样一段视频。视频里金龟子还是保持着二十几年没有变的发现，看着还是那么充满阳光。 金龟子的丈夫大家都非常的熟悉，他叫王宁，曾经也是一位央视主持人，由于长相儒雅出众，被网友称为最帅“国脸”。王宁与金龟子早在大学时期就已经相恋，他们于1988年结婚，夫妻间一直非常恩爱。结婚之后两人正好都遇上了事业最忙碌的时期，所以一直都没有要孩子，直到婚后的第十年，两人迎来了一个女儿。
                两人的女儿叫做王逸宸，现在已经21岁了，完美的继承了父母的颜值优点，长得非常漂亮。终于知道为什么那么多人叫金龟子人生赢家了，日子过得滋润，还有最帅“国脸”的老公和一位颜值超高的女儿，自己也是一直保持年轻的心态，这很难不让人不羡慕了。 很多人都说，一个女人日子过得幸不幸福从脸上就可以看出来，看到金龟子第一眼就知道，这是一个生活在爱里的女人。 金龟子的事例向我们证实，父母是如何相处的对孩子有着极深的影响，下面我们就看看这个话题吧！ 父母对孩子的影响 1、爱互相指责的父母，会导致孩子敏感、执拗、爱找借口
                孩子的成长过程里，家庭环境是非常重要的，倘若父母在生活里经常会指责对方，这样的家庭环境对孩子以后的与人相处，为人处事方面都有着严重的影响。孩子以后可能不会懂得尊重别人，会变得敏感多疑。 2、母亲强势父亲懦弱，会导致男孩胆小、自卑且懦弱 父亲懦弱，母亲强势掌握着主导权，在家说一不二的家庭，孩子就会自然而然认同父母中同性的一方的观点或话语，如果是女儿的话就会认同母亲的强悍，久而久之便会变成这样的人，儿子的话就会变得像父亲一样自卑、懦弱。 3、父母经常打架，会导致孩子脾气暴躁、喜欢暴力
                吵架对于成年人来说是一件很平常的事情，生活在一起总会有一些摩擦，但吵架永远不是解决问题的方式，这只是一种情绪宣泄，但作为父母要知道吵架对孩子有着不好的影响，这会冲击到他们的安全感。在父母的影响下，孩子也会喜欢大吼大叫，脾气火爆，遇到问题甚至会采用暴力。 4、父母之间没有感情，会导致孩子自私任性 父母之间感情淡薄，两人交流就不会很多，父母更多时候是将孩子当做中心，在孩子身上花费更多时间，那样就会过多的关注干涉到孩子的生活，孩子在这样的环境中成长也会变得任性、自私。 5、父母过早离异，会导致孩子没有安全感，为人冷漠
                对孩子伤害最大的还是父母过早的离异，给本就无辜的孩子造成的内心的伤害，是终生都不能平复的，孩子往往会没有安全感，充满恐惧，经常担忧，而这样的情况很可能会伴随他们一生。 6、父母恩爱的孩子性格健康开朗 夫妻的感情对孩子也是有着影响的，夫妻恩爱的家庭环境是温馨和谐的，在这样环境下长大的孩子性格也会非常活泼开朗，更加乐观，也因为父母之间的关系很好，孩子也会养成正确的三观。 总结：总而言之，孩子的成长与生长环境有着很大的关系，在不良的生活环境中长大，对孩子的心理会造成不可磨灭的创伤，甚至很多创伤一辈子也没有办法愈合。
                所以父母们一定要知道，什么是对孩子有利的，不止是表面的爱护，更要关心孩子的心理健康问题，知道如何夫妻和睦，给孩子一个健康的成长环境，这也是孩子的未来负责，不能因为自己的原因影响到孩子的未来。

            </p>
        </div>
        <div class="box">
            <span></span>
        </div>
    </div>
    <script>
        var span = document.getElementsByTagName('span')[0];
        var p = document.getElementsByTagName('p')[0];
        var box = document.getElementsByClassName('box')[0];
        var txt = document.getElementsByClassName('txt')[0];

        span.onmousedown = function(e) {
            e = window.event || e;
            //1. 鼠标按下时 鼠标距离页面顶部距离
            var h = e.clientY;
            // console.log(h);
            //2.滚动条距离父元素的距离
            var eleh = span.offsetTop;
            // console.log(eleh);
            // 3.大盒子.box距离页面顶部距离
            var boxh = box.offsetTop;
            // console.log(boxh);
            // 4. 鼠标按下时 鼠标距离滚动条顶部距离 = h-eleh-boxh
            var eley = h - eleh - boxh;
            // console.log(eley);
            //  5. 滚动条下侧边界值= .box可视区高度- 滚动条的占位高
            var max = box.clientHeight - span.offsetHeight;
            // 右侧滚动范围:
            var r = box.offsetHeight - span.clientHeight;
            // 左侧滚动范围:
            var l = p.offsetHeight - txt.clientHeight;
            document.onmousemove = function(e) {
                e = window.event || e;
                // 5. 鼠标移动时 鼠标距离页面顶部距离- 鼠标距离滚动条顶部距离-大盒子.box距离页面顶部距离
                var mh = e.clientY - eley - boxh;
                // 如果 mh小于0 不能再网上拖了
                if (mh <= 0) {
                    mh = 0;
                }
                if (mh >= max) {
                    mh = max;
                }
                span.style.top = mh + 'px';
                // 右侧滚动距离/右侧滚动范围 = 左侧滚动距离/左侧滚动范围
                // 左侧滚动距离
                var lh = (mh * l) / r
                console.log(lh);
                p.style.top = -lh + 'px';



            }
            document.onmouseup = function() {
                    document.onmousemove = null;
                }
                // 阻止默认事件 文字选中
            return false;
        }
    </script>
</body>

</html>