前端隐藏滚动条,但保持滚动效果

一：以隐藏水平滚动条为例。

1.给父元素加一个样式(overflow:hidden)，隐藏滚动条，但是这样做之后，滚动效果也会消失。

2.障眼法，给父元素添加样式(overflow:hidden),而子元素添加(overflow-x:hidden;overflow-y:scroll;)，然后 把子元素的高设置为父元素的高加上17px，17px是滚动条的高度，这样，父元素隐藏，子元素没有隐藏，实现的效果就是滚动条看不到了，但效果却还在。

3.而有时我们的高度没有固定值的时候，要动态设置高度时，则需要使用javascript;如下：

            //获取父div高度；
            var o = document.getElementById("f_bottom");
            var h = o.offsetHeight;
            //给子div高度赋值；
            document.getElementById("bottom").style.height= h+17 +"px";

4.当我们想通过按钮让滚动条滚动的时候，我们可以给按钮加上事件。以下面为例，可直接复制代码测试

    html部分代码

css部分代码

js部分代码

5：需要注意的是，当高度使用百分比时，比如(height:100%;)，这时候，父元素的高度应该是要有值的，当需要自适应屏幕高度时候，我们应该用js获取浏览器高度，然后再给元素高度赋百分比的值，要不然直接使用百分比是获取不到浏览器高度的。

    //获取浏览器高度
	var clientH = document.documentElement.clientHeight;
    //获取浏览器宽度
     var clientW = document.documentElement.clientWidth;

6.还有下面这个比较常用的方法，要想div随着浏览器高度变化而变化，就应该给html和body都加上(height:100%)，需要注意的是，只单独设置其中的一个，是不会自适应高度的。

	html,body{
		height:100%;
	}

最后推荐一个自学的网站，你一定会感谢我的，记得先注册哦

https://how2j.cn?p=71555