老师,这样可以吗 有个问题

老师,这样可以吗 有个问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>4-3练习</title>

<style type="text/css">

html {

/*overflow-x:hidden;*/

/*overflow-y:hidden;*/

}

* {

margin: 0px;

padding: 0px;

overflow-y: hidden;

}

.container {

width: 100%;

height: 4000px;

z-index: 1;

position: absolute;

background: url("http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png") center no-repeat ;

}

.nav_left img {

width: 200px;

height: 300px;

position: fixed;

left:0;

top:50%;

z-index: 9999;

margin-top:-150px;

}

.nav_right img {

width: 200px;

height: 300px;

position: fixed;

right:0;

top:50%;

z-index: 9999;

margin-top:-150px;

}

</style>

</head>

<body>

<div class="container" >

<!-- <div class="background">


</div> -->

<div class="nav_left">

<img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png" alt="nav_left">

</div>

<div class="nav_right">

<img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png" alt="nav_left">

</div>

</div>

</body>

</html>


因为右边滚动条的出现,所以右边定位的图片width的距离看起来缩短一点,所以我加了overflow-y: hidden;这个样式,但是滚动条消失,随之鼠标也不能对网页滚动。

如何把滚动条隐藏,但又不对滚动条功能失效

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕粉 2020-02-07 19:39:58

同学你好,老师又测试了下同学的代码,确实没有同学所说的框:

http://img1.sycdn.imooc.com//climg/5e3d4c0809228eb301410479.jpg

应该是谷歌浏览器版本的问题,同学可以检查下自己谷歌浏览器的版本:

http://img1.sycdn.imooc.com//climg/5e3d4c320975e24704400140.jpg

查看下是否是最新版本。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

好帮手慕粉 2020-02-01 18:06:08

同学你好,老师这边测试是没有的:

http://img1.sycdn.imooc.com//climg/5e354d3f09f8f6a601170654.jpg

样式设置的已经将滚动条进行隐藏了。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕尼黑7895541 #1
    还是这样。。。
    2020-02-07 14:00:22
  • 好帮手慕粉 回复 提问者 慕尼黑7895541 #2
    同学你好,代码设置的是在谷歌浏览器下隐藏,老师在谷歌浏览器进行测试的,没有问题,同学可以再用谷歌测试一下。如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
    2020-02-07 15:18:32
  • 提问者 慕尼黑7895541 回复 好帮手慕粉 #3
    我问题重新发布了,有截图谷歌浏览器的,老师帮忙看下
    2020-02-07 15:41:14
好帮手慕星星 2020-01-29 14:17:43

同学你好,布局以及定位是可以的,很棒!

另外,滚动条隐藏,但又不对滚动条功能失效,可以用伪类完成(用Chrome浏览器测试)

http://img1.sycdn.imooc.com//climg/5e31235509f8a1d004380331.jpg

将body页面的滚动条设置为隐藏效果,自己可以试一下。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕尼黑7895541 #1
    滚动条是不见了,但是装滚动条那个框还在,如何去除
    2020-01-31 06:28:33
提问者 慕尼黑7895541 2020-01-26 17:59:35

网上找的答案,都用过了。都没用,不知道是不是跟定位相冲突

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师