HTML中横向滚动不起作用的问题_IT百科

在第一张前(<img border="0" src=)加上<marquee dicection=left>

然后在末(width="100" height="100">)加上 </marquee>

可以参考此样例：

table{width:100%;overflow-x: scroll;background-color:#7c95b5;}fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;}fixedTable tr{line-height: 30px;border:1px solid #fff;}fixedTable tr:first-child{height:40px;line-height: 40px;background-color:cadetblue;}fixedTable td:first-child{position:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;}fixedColumn{width:99px;}

<html>

<head>

<title>使用css固定table第一列</title>

</head>

<body>

</table>

</div>

</body></html>

View Code

适用移动端

转载于：wwwmdcodecn

当我们在css样式设置为html {overflow-y:auto;}时，在ie7以上版本应用时不会有问题，可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现。究其原因是在ie6下，当内容过多出现垂直滚动条时，此时页面的宽度为其本来宽度加上滚动条的宽度，导致页面宽度超过100%，而出现横向滚动条，在ie7+浏览器中，会自动的识别滚动条，页面宽度为内容的宽度加上滚动条的宽度等于100%，而不会出现滚动条，这相当于是ie的滚动条bug(纯属个人见解，不对的地方还请指出，共同学习交流)。

解决上述出现的问题有以下几个方案

方案一：添加html{overflow-y:hidden;}样式

这种方案仅仅是把出现的横向滚动条隐藏了，并没有解决根本问题，而且还会出现不想要的效果（横向多余的内容会被隐藏掉），这是一种不好的解决方法。

方案二：添加html{overflow-y:scroll;}

添加这个样式，当页面内容超过页面高度时，会正常的显示垂直滚动条，而且不会出现横向滚动条，看起来是我们要的效果；可是页面内容不足以出现垂直滚动条的时候，我们会发现页面的右边会出现一条置灰样式的滚动条位置，这个看起来并不美观，不是我们想要的效果。不过最起码已经开始接近我们想要的效果了，比起第一种解决方案，他的效果还是好的。

方案三：通过jQuery实现

单纯的css样式已经不能满足我们的需要，通过第二个方案我们可以想到一种比较好的解决方法，我们可以判断当页面高度需要垂直滚动条时，把页面样式设置为overflow-y:scroll；这样是不是就会达到我们想要的效果，事实证明完全是ok的，

$(function () {

//解决IE6下页面出现横向滚动条

if ($browsermsie && $browserversion == "60" && $("html")[0]scrollHeight > $("html")height())

$("html")css("overflowY", "scroll");

})

以上就是对页面出现横向滚动条的解决方法，只是针对我目前遇到的情况，方法肯定还有很多，以后有时间再慢慢补充，，，

（有人说谷歌浏览器有相对应的解决方法，时间有限，没去研究，在此标记下）

转自：博客园《IE6下出现横向滚动条问题的解决方案》--鱼爱水

你好这种情况是在分辨率大小不同的情况下产生的 css可以解决就是你内部宽度不能用固定的px了要用百分比来算

比如原来外部大框架 div width:1350px 那么现在就只能写 width:100%了这样才会按比例缩放

希望能帮到你谢谢

通过此函数可以获取到鼠标滚动事件，然后做平移就好了

/ Event handler for mouse wheel event

鼠标滚动事件

var wheel = function(event) {

var delta = 0;

if (!event) / For IE /

event = windowevent;

if (eventwheelDelta) { / IE/Opera /

delta = eventwheelDelta / 120;

} else if (eventdetail) {

/ Mozilla case /

/ In Mozilla, sign of delta is different than in IE

Also, delta is multiple of 3

delta = -eventdetail / 3;

}

/ If delta is nonzero, handle it

Basically, delta is now positive if wheel was scrolled up,

and negative, if wheel was scrolled down

if (delta)

handle(delta);

/ Prevent default actions caused by mouse wheel

That might be ugly, but we handle scrolls somehow

anyway, so don't bother here

if (eventpreventDefault)

eventpreventDefault();

eventreturnValue = false;

}

/ Initialization code

If you use your own event management code, change it as required

if (windowaddEventListener) {

/ DOMMouseScroll is for mozilla /

windowaddEventListener('DOMMouseScroll', wheel, false);

}

/ IE/Opera /

windowonmousewheel = documentonmousewheel = wheel;

/ This is high-level function

It must react to delta being more/less than zero

var handle = function(delta) {

var random_num = Mathfloor((Mathrandom() 100) + 50);

if (delta < 0) {

// alert("鼠标滑轮向下滚动：" + delta + "次！"); // 1

$("btn_next_pic")onclick(random_num);

return;

} else {

// alert("鼠标滑轮向上滚动：" + delta + "次！"); // -1

$("btn_last_pic")onclick(random_num);

return;

}

给你个代码看看：

<option title="html中的文字太长，列表框中显示不完整，麻烦大家了" value="f">html中的文字太长，列表框中显示不完整，麻烦大家了</option>

<option title="听说是用js代码实现，麻烦给个例子，谢谢

" value="d">听说是用js代码实现，麻烦给个例子，谢谢

</option>

<option title="或者鼠标指在某条上，显示完整的文字也行">或者鼠标指在某条上，显示完整的文字也行</option>

</select>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/bake/12177838.html

HTML中横向滚动不起作用的问题

发表评论

评论列表（0条）